nicht angemeldet
Hi,
wie kann ich in einem div-tag den Text vertikal mittig ausrichten?
Leider eine Lücke beim derzeit per Css Machbaren: es gibt für IE schlicht keine Möglichkeit, da der display:table-cell nicht kennt. vertical-align bezieht sich auf die aktuelle Zeilenhöhe, nicht aber auf eine "box" - wie auch immer Du Dir diese bastelst. Lediglich innerhal einer td lässt sich vertical-align auch beim IE in der von Dir gewünschten Form anwenden.
Ich habe mal einen workaround gebastelt der Deinem Vorhaben vielleicht entgegenkommt. Die Box wird hier mittels h-tag erzeugt. Andere Höhen müssen für IE in den Conditionals auch beim font-size angegeben werden. Ist aber nur ein Test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>vertical centered</title>
<style type="text/css">
body{
margin: 0;
padding: 20px;
font-family: sans-serif;
}
h1 {
width: 250px;
height: 200px;
padding: 0;
margin: 0;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid red;
}
a.aligned {
width: 250px;
font-size: 18px;
line-height: 20px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
color: black;
}
h1 a.aligned span {
font-weight: normal;
font-size: 11px;
}
</style>
<!--[if lte IE 6]>
<style>
h1 {
margin:0;
padding:0;
height:200px;
font-size:165px;
}
h1 a.aligned {
font-size:18px;
line-height:100%;
vertical-align:middle;
display:inline-block;
}
</style>
<![endif]-->
</head>
<body>
<h1><a class="aligned" href="#">Dieser Text <br><span>[wird zentriert]</span></a></h1>
</body>
</html>
Gruesse, Joachim
Am Ende wird alles gut.
Gunnar Bittersmann