5 Bilder in zwei Reihen untereinander

tim128er · 24. März 2018

Hallo,

ich habe eine Website (http://infestum.org/) und möchte unter "Team", die 5 Bilder so aufteilen, dass in der oberen Zeile 3 und in der unteren Zeile 2 Bilder zu sehen sind. Beide Zeilen sollen aber zentriert sein. Wie bekomme ich das ganze hin, habt ihr da Ideen? (Bin mir eigentlich sicher, dass ihr welche habt

)

mildmr · 24. März 2018

<div id="x"></div> um die einzelnen Zeilen drumpacken und jeweils zentrieren mit css oder html je nach gusto. Zur Not geht auch ne tabelle

und dann in der css datei für jede Zeile

.x {
margin: auto;
}

Bagbag · 24. März 2018

Flexbox!

Code:

<div id="member" class="member-list">
	<span class="team-member"><p>NanZa</p><a href="#"><img src="img/Nanza.png" alt="NANZA"></a><p>The Z stands for safety</p></span>
	<span class="team-member"><p>J0hnnyB</p><a href="#"><img src="img/Joni.png" alt="JOHNNYB"></a><p>Safety is number one priority</p></span>
	<span class="team-member"><p>tim128er</p><a href="#"><img src="img/Tim.png" alt="TIM128ER"></a><p>Dedicated Bottom Fragger</p></span>			
	<span class="team-member"><p>sakebenny</p><a href="#"><img src="img/Benne.png" alt="SAKEBENNY"></a><p>Living Decoy</p></span>
	<span class="team-member"><p>AN1LLL</p><a href="#"><img src="img/Anil.png" alt="AN1LLL"></a><p>Best AWP Soltau</p></span>
</div>

<style>
.member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.team-member {
    margin: 0 1.5rem;
}
</style>

Passt sich automatisch an die Anzahl der Member und die Breite des Containers an.

Falls du kein Abstand zwischen den Membern in der unteren reihe willst:

Code:

justify-content: center;

auf .member-list

Suche

5 Bilder in zwei Reihen untereinander

tim128er

Cadet 4th Year

mildmr

Lieutenant

Bagbag

Commodore

Ähnliche Themen