float:left soll nach Umbruch mittig sein

[Jormungand]

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.

<div class="bild1"><img src="img/seite1bild1.jpg" /></div>
    <div class="bild2"><img src="img/seite1bild2.jpg" /></div>

.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;
}

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;

 

[ben3plus]

In Deinem Code kommt doch gar kein float vor. Bisher floatet da nichts. Du hast zwei Bilder in zwei verschiedenen Größen zentriert untereinander stehen.

 

[Enigmon]

Korrigiert:
Stimmt. So ist es leider sehr schwer nachzuvollziehen.

LG
Thomas

 

[Jormungand]

Sorry, hatte das float:left vergessen.
Bild1 hat ein float:left; , das zweite nicht. Ist jetzt auch in der Threadbeschreibung geändert.

 

[itstumpp]

Arbeit mit den Media-Querries um die max. Breite zu bestimmen, bis zu welcher das Bild zentriert werden soll.

@media (max-width:320px) {
     .bild1 {float:inherit;}
}

 

[Jormungand]

Danke für den Tipp, aber genau davor wollte ich mich drücken. Da ich mehrere verschieden breite Bilder habe, die immer anders umbrechen, bäuchte ich dutzende von media-query Zuständen.
Aber wenns nicht anders geht...

 

[Enigmon]

Vielleicht hilft dieser kurze Thread weiter, bei dem was du planst.

https://www.psd-tutorials.de/forum/threads/verschiedene-bilder-positionieren-mit-css3.167923/

oder gibt dir einfach neue Ideen..

LG
Thomas

 

[FlashZange]

Vielleicht mit JavaScript, mit der Struktur
wenn Breite bild1 + Breite bild2 > Breite viewport
dann float:none

Hängt natürlich davon ab, wie die Struktur mit mehreren Bildern dann genau aussehen soll.

 

[Myhar]

Wenn dir Besucher mit älteren Browsern nicht so wichtig sind dann ist flexbox wohl eine gute Lösung für dich.

 

[Jormungand]

Danke euch allen, für die ganzen Tipps. Aber wenn ich es überblicke, muss ich so oder so einen tieferen Eingriff machen.
Dann bleib ich wohl bei der Media Query Variante.

Danke und beste Grüße
Jormungand

 

[ebene11]

Du müsstest deinen floatenden divs eine Breite mitgeben. Ansonsten ziehen sie sich diese von ihrem Inhalt (in diesem Fall die Bilder, d.h. div und img haben die gleiche Breite).

 

[Jormungand]

Wenn ich ihnen eine feste Breite gebe und der Viewport wird kleiner, dann entstehen horizontale Scrollbalken und die Bilder selbst skalieren sich nicht mehr automatisch. Aber danke für den Vorschlag.

 

[ebene11]

Von fester Breite habe ich nichts gesagt - es war nur die Antwort auf:

Das klappt aber nur beim zweiten Bild, welches unter das erste springt. Das erste bleibt aber selbst linksbündig.

Du kannst natürlich mit min-width, width, max-width und relativen Werten arbeiten um z.B. horizontale Scrollbalken zu verhindern.
Vielleicht hast du auch eine Skizze zur Hand, wie es aussehen soll, dann könnte man konkrete Vorschläge machen.