VonAllemEtwas
Hallo alle,
auf einer Website habe ich zwei Bilder nebeneinander gefloatet.
Irgendwann, wenn der Viewport kleiner wird, ordnen sich die Bilder untereinander an.
Jetzt sollen sie zentriert sein. Das klappt aber nur beim zweiten Bild, welches unter das erste springt. Das erste bleibt aber selbst linksbündig.
Da auf der Seite Bilder in verschiedensten Größen sind, würde ich gerne drauf verzichten, für jeden Umbruch eine extra Media Query aufzumachen.
Schöne Grüße
Jormungand
Edit: Sorry, hatte das float vergessen. Nur das erste Bild hat float:left;
auf einer Website habe ich zwei Bilder nebeneinander gefloatet.
Irgendwann, wenn der Viewport kleiner wird, ordnen sich die Bilder untereinander an.
Jetzt sollen sie zentriert sein. Das klappt aber nur beim zweiten Bild, welches unter das erste springt. Das erste bleibt aber selbst linksbündig.
HTML:
<div class="bild1"><img src="img/seite1bild1.jpg" /></div>
<div class="bild2"><img src="img/seite1bild2.jpg" /></div>
CSS:
.bild1 {
text-align: center;
margin-bottom: 1em;
float:left;
}
.bild1 img {
max-width: 567px;
}
.bild2 {
text-align: center;
margin-bottom: 1em;
}
.bild2 img {
max-width: 191px;
}
Schöne Grüße
Jormungand
Edit: Sorry, hatte das float vergessen. Nur das erste Bild hat float:left;
Zuletzt bearbeitet: