Problem mit middle bei mittlerem flexbox Element (?)

[JQerleger]

Hallo, ich versuche in einer kleinen flebox-Tabelle, im mittleren Element, ein img vertical und horizontal zu zentrieren. Aber ich komme einfach nicht weiter.

box {
  display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
}
box h2 {
	color: black;
	font-size: 1.2em;
    
}
test:nth-child(1) {
	background: red;
}
test:nth-child(2) {
	background: green;
	height: 220px;
}
bild {
  display: inline;
  vertical-align: middle;
}
test:nth-child(3) {
	background: blue;
}

<main>
<box>
	<test>
		<h2>1</h2>
	</test>
	<test>
    <bild class="img">
		  <img src="Reif_und_Hochsitz.jpg">
	  </bild>
  </test>
	<test>
		5<br>6<br>7
    </test>
</box>
</main>

Die Bilder sind immer gleich breit, aber verschieden hoch, daher hab ich child(2) die feste Höhe gegeben.

Für Lösungsvorschläge und Balgen vor den Augen wegschieben bin ich Dankbar

[MrMurphy1]

Hallo

Da passt irgendwie überhaupt nichts.

In HTML gibt es keine Elemente wie box, test oder bild.

Und Flexbox wendest du zudem vollkommen falsch an. Aber zuerst muss da HTML als Grundlage für das CSS stimmen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

In HTML gibt es keine Elemente wie box, test oder bild.

Was CSS aber sowas von Schnuppe ist. CSS gibt die Darstellung von wie auch immer geartetem Markup an und ist keinesfalls auf HTML beschränkt.

Und mit einem Bindestrich im Elementbezeichner (bspw. x-box) wäre das sogar richtiges HTML.

Und Flexbox wendest du zudem vollkommen falsch an. Aber zuerst muss da HTML als Grundlage für das CSS stimmen.

Ersteres mag zutreffen, zweiteres nicht.

Ob das sinnvoll ist, hier eigene Elementtypen zu verwenden, ist eine andere Frage …

LLAP 🖖

[Gunnar Bittersmann]

@@JQerleger

Für Lösungsvorschläge und Balgen vor den Augen wegschieben bin ich Dankbar

Ich hab mein Balg gerade aus meinem Bilckfeld weggeschoben; es liegt jetzt im Bett.

Wo kann man sich dein Problem ansehen? Online-Beispiel, bitte.

LLAP 🖖

[JQerleger]

Das ist noch nicht online, werde aber so schnell wie möglich ein Beispiel online stellen und dann den Link angeben.

[JQerleger]

Hier der Link: Testseite

[Gunnar Bittersmann]

@@JQerleger

Hier der Link: Testseite

vertical-align: „Anwendbar auf: inline Elemente[sic!] und Tabellenzellen“ [MDN]

Bei dir also wirkungslos. Weg damit!

Was du machen könntest: test:nth-child(2) eine Flexbox sein lassen^[1], worin das Bild zentriert wird:

test:nth-child(2)
{
    background: green;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

LLAP 🖖

---

1. Elemente können sowohl Flexitem als auch Flexbox gleichzeitig sein. ↩︎

[JQerleger]

Hallo Gunnar,

herzlichen Dank für den Tipp. Hab es so eingepflegt und als Beispiel daneben gestellt. Im Firefox sieht es jetzt vernünftig aus, aber chromium macht Hackfleisch draus. Da werd ich wohl noch ein wenig Arbeit investieren müssen 😀

[JQerleger]

Das mit Chrom hat sich auch erledigt: Cache geleert