nicht angemeldet
Text vertikal zentriert neben Blockelement
Wie kriege ich ein Span-Element vertikal zentriert links neben ein Blockelement?
Der Text links ("Text") sollte schön in der Mitte sein, ist aber am oberen Rand des Divs ausgerichtet.
<!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">
.vertical_align_middle
{
vertical-align: middle;
float: left;
}
</style>
</head>
<body>
<table style="width:300px;">
<tr>
<td height="60px" style="border-style: solid; vertical-align: middle;">
<span id="lblPasswordValue" class="vertical_align_middle">Text</span>
<div style="border: solid 1px; display: inline; float: right; width:50%; height: 40px;">Text2</div>
</td>
</tr>
</table>
</body>
</html>
-
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
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi bef,
Indem du beide elemente mit display:inline-block bezeichnest und vertical-align:middle definierst.
float ist dafür nicht geeignet.
Hab's mal probiert. Klappt prima. Wenn "vertical-align: text-top;" gesetzt ist, sind auch beide Texte bündig mit der oberen "Buchstabenkante" - so, wie's sein soll. Wenn man rechts allerdings ein Bild hat und "vertical-align: text-top;" einsetzt, ist das Bild nicht ganz oberkantenbündig mit dem Text. Gibt's da einen Trick, damit beides bündig ist? Oder bleibt nur für das Bild ein pminimales padding-top zu wählen?
Gruss
-
Hi,
Wenn man rechts allerdings ein Bild hat und "vertical-align: text-top;" einsetzt, ist das Bild nicht ganz oberkantenbündig mit dem Text. Gibt's da einen Trick, damit beides bündig ist?
Der Trick lautet: Sich informieren, welche Werte vertical-align noch annehmen kann.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Was für eine freundliche Antwort...
ob "text-top" oder "top" führt in diesem Fall zum gleichen Ergebnis!
Trotzdem danke für Deinen Beitrag
-
@ ChrisB
Der Trick lautet: Sich informieren, welche Werte vertical-align noch annehmen kann.
MfG ChrisB
PS: Wollte Dir nur mal zu Iformation folgendes Zitat geben:
"Leider funktioniert auch das Ausrichten von Text an Bildern in kaum einem Browser so, wie es vom W3C vorgesehen ist. Insgesamt ist diese Eigenschaft also sehr fehlerbehaftet."
http://www.css4you.de/Texteigenschaften/vertical-align.html
Gruss
-
-
P.S.:
Bitte unterlasse das Posten unter mehreren Nicknames - Sockenpuppen sind nicht erwünscht.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
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"><<<hidden>>></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>-
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.
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.Für den MSIE 6/7 nimmst display:inline; zoom:1
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-