Text und Bilder mittig in der Höhe positionieren?

Cyperfriend · 30 Juli 2015

Ich möchte innerhalb eines <Div>-Containers Text und Bilder in der Höhe mittig positionieren. Die Höhe ist fest vorgegeben. (50px). Kann mir bitte jemand sagen, wie ich das anstellen muss? Ich verzweifle hier. Ich will es unbedingt mit CSS machen, kein Tabellenlayout.

So sieht der HTML-Code aus:
[src=html4strict]
<div id="navi">
<ul>
<li><img src="images/1.png" name="1" alt="1"> Text 1</li>
<li><img src="images/2.png" name="2" alt="2"> Text 2</li>
<li><img src="images/3.png" name="3" alt="3"> Text 3</li>
<li><img src="images/4.png" name="4" alt="4"> Text 4</li>
<li><img src="images/5.png" name="5" alt="5"> Text 5</li>
<li><img src="images/6.png" name="6" alt="6"> Text 6</li>
</ul>
</div>
[/src]

Jester · 30 Juli 2015

Hey,

grundsätzlich ist das so nicht vorgesehen ^^ Da Bilder und Text inline abgebildet werden, ist die Schriftlinie immer gleich der Unterkante des Bildes.

Workaround:
Links das Bild, left floatend, rechts daneben ein DIV mit 50px Höhe für den Text, left floatend und einer line-height von ebenfalls 50px.
Danach ein clear:left vor dem nächsten LI.

Da Listeneinträge seltsamerweise Block-Level-Elemente beinhalten dürfen, ist das sogar standardkonform.

Passt das?

J.

Cyperfriend · 30 Juli 2015

Unglaublich, dass so eine Standardsache nicht vorgesehen ist. Muss in CSS4 unbedingt integriert werden.
Ich kann mir deine Lösung grad nur schwer als Code vorstellen. Kannst du mir das eben zusammenbasteln?

Jester · 30 Juli 2015

@Cyperfriend:

[src=html4strict]
<!doctype html>
<html>
<head>
<style type="text/css">
img.fl { float:left }
div.fl50 { float:left; height:50px; width:70px; line-height:50px }
div.clr { clear:left }
</style>
</head>
<body>
<div id="navi">
<ul>
<li><img src="images/1.png" name="1" alt="1" class="fl"><div class="fl50">Text 1</div><div class="clr"></div></li>
<li><img src="images/2.png" name="2" alt="2" class="fl"><div class="fl50">Text 2</div><div class="clr"></div></li>
<li><img src="images/3.png" name="3" alt="3" class="fl"><div class="fl50">Text 3</div><div class="clr"></div></li>
<li><img src="images/4.png" name="4" alt="4" class="fl"><div class="fl50">Text 4</div><div class="clr"></div></li>
<li><img src="images/5.png" name="5" alt="5" class="fl"><div class="fl50">Text 5</div><div class="clr"></div></li>
<li><img src="images/6.png" name="6" alt="6" class="fl"><div class="fl50">Text 6</div><div class="clr"></div></li>
</ul>
</div>
</body>
</html>

[/src]

Habs nicht auf CB geprüft, müsste aber passen. Ein Problem wird es geben, wenn der Text nicht genug Platz hat und umbricht, da sich dann die Zeilenhöhe logischerweise verdoppelt.

Um das auch abzuwenden, wäre für den Text eine 1-zellige Tabelle tatsächlich zwar semantisch nicht korrekt, würde aber die Anforderung technisch gesehen erfüllen.

Gruß,

J.

Ps: Du kannst dem LI auch display: table-cell und vertical-align: middle geben.

natellu · 31 Juli 2015

möglichkeit 3:
du gibst deinen bild/text eine bestimmte höhe (30px) ermittelst die hälfte deiner verfügbaren höhe (50/2=25px) und ziehst davon die hälfte deiner text/bild höhe ab (25-15=10). deinem bild/text gibst du nun 10px abstand von oben und fertig.

dexter · 31 Juli 2015

Cyperfriend schrieb:
Unglaublich, dass so eine Standardsache nicht vorgesehen ist. Muss in CSS4 unbedingt integriert werden.

Ist bereits in CSS 1 enthalten. Und wurde zwischenzeitlich (logisch!) auch nicht wieder entfernt.
Pro-Tip: Wenn's an den Suchmaschinen-Skills hapert, einfach alternativ mal die diversen Dokus zu display:table-* lesen, damit kann man fast alles realisieren, wenn man den normalen einfachen Weg nicht weiss.

Text und Bilder mittig in der Höhe positionieren?

Cyperfriend

Der ohne Avatar

Jester

★★★★☆ (Kasparski)

Cyperfriend

Der ohne Avatar

Jester

★★★★☆ (Kasparski)

natellu

Neu angemeldet

dexter

Cloogshicer®