Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Jormungand" data-source="post: 2498309" data-attributes="member: 232651">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.[html]&lt;div class=&quot;bild1&quot;&gt;&lt;img src=&quot;img/seite1bild1.jpg&quot; /&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bild2&quot;&gt;&lt;img src=&quot;img/seite1bild2.jpg&quot; /&gt;&lt;/div&gt;[/html][code=CSS].bild1 {&nbsp;&nbsp; text-align: center;&nbsp;&nbsp; margin-bottom: 1em;float:left;}.bild1 img {&nbsp;&nbsp; max-width: 567px;}.bild2 {&nbsp;&nbsp; text-align: center;&nbsp;&nbsp; margin-bottom: 1em;}.bild2 img {&nbsp;&nbsp; max-width: 191px;}[/code]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üßeJormungandEdit: Sorry, hatte das float vergessen. Nur das erste Bild hat float:left;</blockquote>

[QUOTE="Jormungand, post: 2498309, member: 232651"] 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. [html]<div class="bild1"><img src="img/seite1bild1.jpg" /></div> <div class="bild2"><img src="img/seite1bild2.jpg" /></div>[/html] [code=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; } [/code] 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; [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?