vertical align in inline elementen
alex_
- css
hi, ich bemüh mich gerade eine vertikale zentrierung in inline elementen zu erreichen aber scheinbar nehmen dir Browser mich nur in Tabellen wahr:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
td.menuitem {
width:166px;
height:130px;
padding-left:30px;
vertical-align:middle;
font: italic 14px Verdana;
border: solid 1px red;
}
div.menuitem {
width:166px;
height:130px;
padding-left:30px;
border: solid 1px red;
}
span {
height:100%;
vertical-align:middle;
font: italic 14px Verdana;
}
</style>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td class="menuitem">
test
</td>
</tr>
</table>
<div class="menuitem"><span>test</span></div>
</body>
</html>
wieso funzt das nicht im div?
Hi,
hi, ich bemüh mich gerade eine vertikale zentrierung in inline elementen zu erreichen aber scheinbar nehmen dir Browser mich nur in Tabellen wahr:
nein, bei Inline-Elementen beschreibt vertical-align die Ausrichtung der Elemente _zueinander_. Wenn Du also mehrere Inline-Elemente hast, die unterschiedlich hoch sind, wirst Du den Effekt sehen.
<head>
Dass der <title> fehlt, sei nur am Rande erwähnt.
font: italic 14px Verdana;
Hier solltest Du _unbedingt_ die generische Schriftfamilie mit angeben.
span {
height:100%;
Dies ist bei Inline-Elementen ohne Wirkung.
wieso funzt das nicht im div?
Niemand hindert dich daran, das <div> zu einem table-cell-Element zu machen.
Cheatah
Niemand hindert dich daran, das <div> zu einem table-cell-Element zu machen.
ahh, doch, mein kenntnisstand .-)
danke .-)
btw: könnte man ja in selfhtml mal andeuten. (Falls es drin steht ist es nicht offensichtlich...)
alex
Hi,
Niemand hindert dich daran, das <div> zu einem table-cell-Element zu machen.
ahh, doch, mein kenntnisstand .-)
die Antwort gefällt mir, muss ich mir merken :-)
btw: könnte man ja in selfhtml mal andeuten. (Falls es drin steht ist es nicht offensichtlich...)
SelfHTML ist derzeit so alt wie der aktuelle IE, also steinalt. Eine Neufassung befindet sich in der Bearbeitung.
Cheatah