Bild vertikal zentrieren in einer li (Aufzählung)

[Khan]

Hi Leute,

das ewige Leiden mit dem vertikalem Zentrieren eines Bildes. Anbei ein Screenshot, das F soll innerhalb des Rahmens vertikal zentriert werden. Horizontal habe ich es durch text-align:center; hinbekommen.

Hier der Code aus dem CSS:

ul#SuperThumbs li {
	float: left;
	background: #ffffff;
	border: 1px solid #cccccc;
	margin: auto;
	text-align:center;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width:150px;
	height:150px;
	text-align:center;
}

Das HTML sieht so aus:

<ul id="SuperThumbs">
	<li><img src="f.jpg" /></li>
</ul>

Danke für den Tip!

[Gunnar Bittersmann]

@@Khan

das ewige Leiden mit dem vertikalem Zentrieren

hat ein Ende.

LLAP 🖖

[Khan]

Danke

Soviel Code für nur einmal mittig darstellen. Krass!

 height: 150px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;

[Auge]

Hallo

Soviel Code für nur einmal mittig darstellen. Krass!

     height: 150px;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;

Dass das soviel ist, liegt an der Geschichte der Entwicklung von Flexbox mit unterschiedlichen Syntaxen. Mittlerweile ist die Unterstützung durch die aktuellen Browser fast ausschließlich ohne die Herstellerpräfixe möglich. Dadurch entfällt zukünftig, wenn die Browser, die die zusätzlichen Regeln brauchen, aussterben, auch viel Code.

Tschö, Auge

[Gunnar Bittersmann]

@@Khan

Soviel Code für nur einmal mittig darstellen. Krass!

Das mit den Präfixen hat ja bald ein Ende.

Und du hättest ja auch einen anderen Weg gehen können. Bin ich in meinem Webkrauts-Adventskalender-Artikel auch. (Ohne jetzt einen der Wege als besser bewerten zu wollen.)

LLAP 🖖