Text und Bilder mittig in der Höhe positionieren?

Jump to last post
C

Cyperfriend

Der ohne Avatar
Registriert
14 Juli 2013
Beiträge
1.123
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]
 
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.
 
  • Thread Starter Thread Starter
  • #3
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?
 
You do not have permission to view link please Anmelden or Registrieren


[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.
 
Zuletzt bearbeitet:
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.
 
Cyperfriend schrieb:
Unglaublich, dass so eine Standardsache nicht vorgesehen ist. Muss in CSS4 unbedingt integriert werden.
Zum Vergrößern anklicken....
Ist bereits in
You do not have permission to view link please Anmelden or Registrieren
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben