Bef: Text vertikal zentriert neben Blockelement

Beitrag lesen

SELF-Forum

Text vertikal zentriert neben Blockelement

Bef
– Informationen zu den Bewertungsregeln

Wie kriege ich ein Span-Element vertikal zentriert links neben ein Blockelement?

Indem du beide elemente mit display:inline-block bezeichnest und vertical-align:middle definierst.

float ist dafür nicht geeignet.

mfg Beat

Danke für den Tipp, allerdings ist das meiner Meinung nach keine optimale Lösung. Ich habe die Fragestellung versucht zu vereinfachen, dadurch war sie aber nicht mehr ganz klar.
Eigentlich wollte ich rechtsbündig ein Bild und linksbündig einen Text, der genau in der Mitte der Höhe des Bildes ist. Die Lösung sollte auch mit älteren Browsern (vor allem IE6) funktionieren.

Inline-block wird von IE6 schon mal nicht unterstützt. Ich habe jetzt allerdings eine scheinbar sehr gut kompatible Lösung gefunden.

Bei folgendem Beispiel fehlt das Bild, man kann aber sehr gut erkennen, wo es sein sollte (border). Die vertikale Zentrierung wurde durch Setzen der Zeilenhöhe auf die Höhe des Containers erreicht. Vertical-align richtet nur nach Inline-Elementen aus und nicht nach dem Blockelement, das den Text enthält (das div). Float macht aus dem Bild automatisch ein Blockelement, weshalb Vertical-align hier nicht funktioniert.
Margin-top und Margin-bottom des Span-Elements auf "auto" zu setzen funktioniert irgendwie nicht... ich dachte, das sollte so eigentlich auch klappen.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head><title></title>  
    <style type="text/css">  
  
        .align_middle_left  
        {  
        	float: left;  
        	height: 38px;  
        	line-height: 38px;  
        }  
  
        .align_middle_right  
        {  
        	float:right;  
        }  
    </style>  
</head>  
<body>  
<div style="height: 38px; width: 400px;">  
	<span id="lblPasswordValue" class="align_middle_left">&lt;&lt;&lt;hidden&gt;&gt;&gt;</span>  
      	<input type="image" name="btnCopy" id="btnCopy" class="align_middle_right" src="images/Copy.gif" alt="Bild" style="height:38px;width:38px;border: 1px solid;" />  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln