JQerleger: Problem mit middle bei mittlerem flexbox Element (?)

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

akzeptierte Antworten

  1. 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

    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Das ist noch nicht online, werde aber so schnell wie möglich ein Beispiel online stellen und dann den Link angeben.

      1. Hier der Link: Testseite

        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

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

          1. 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 😀

            1. Das mit Chrom hat sich auch erledigt: Cache geleert