Css Bilder mittig und trotzdem nebeneinadner?
Hallo zusammen,
ich habe mehrere Bilder Nebeneinader platziert.
Diese werden im Moment am linken Bildschirmrand dargestellt. Es soll aber so sein, dass die nebeneinander auf allen Bildschirmen mittig dargestellt werden.
Ich habe die Bilder schon in ein Tabelle Zelle und diese Versucht zu zentrieren aber ohne Erfolg.
6 Antworten
Mehrere Bilder, mehrere Bildschirme, Nebeneinander, zentriert....
Bitte schreibe nochmal eine anständige Erklärung deines Problems. Man schreibt kein css, welches sich auf mehrere Bildschirme auswirkt.
Am besten packst du vllt noch einen Screenshot von der Website und Code rein oder du machst es direkt anständig und nutzt https://jsfiddle.net/
Dann können wir dir auch gescheit helfen :)
Packe deine Bilder in einen Container, den du via Flexbox-Layout positionierst.
Beispiel:
HTML:
<div class="container">
<!-- images ... -->
</div>
CSS:
.container {
display: flex;
justify-content: center;
}
.container > img {
border: 1px solid;
margin: 5px;
}
Css Bilder mittig und trotzdem nebeneinadner?
Das macht man so:
<!doctype html>
<title>Bilder mittig zentrieren</title>
<style>
div
{
display:table;
margin:auto
}
</style>
<div>
<img src="https://placehold.it/200x100" alt="">
<img src="https://placehold.it/200x100" alt="">
<img src="https://placehold.it/200x100" alt="">
</div>
Alex
Guck dir mal die Thematik "Responsive Design" und vllt "Flex-Box" dazu an. Damit dürftest du dein Problem lösen. Tabellen sind nicht responsive.
Mach ein div drum und geb dem div folgendes CSS:
display:flex;
Dann sind die Bilder nebeneinander.
Zum zentrieren (auf die Bilder):
display:block;
margin-left:auto;
margin-right:auto;
Also die Bilder sind jetzt nebeneinander?
Kannst du mal ein Bild posten, wie das jetzt aussieht?
Jetzt steht alles links von meinen eigentlichen Content und ist über den ganzen Bildschirm in die Höhe verzerrt
Hast du nur die Bilder im div?
Das CSS zum Zentrieren nur für die Bilder?
Beachte, dass alle Elemente in einem Element das CSS übernehmen.
Ich habe nochmal ein Bild in die Antworten wie es jetzt aussieht