div tags
ash
- css
0 afra0 ash0 afra
0 Gunnar Bittersmann0 afra
0 Gunnar Bittersmann0 Joachim
Hallo,
wie kann ich in einem div-tag den Text vertikal mittig ausrichten?
vertical-align: middle;
hat keinen Erfolg gebracht.
danke,
_ash
Hallo ash!
vertical-align: middle; hat keinen Erfolg gebracht.
Wie wäre es, wenn Du etwas näherliegendes verwenden würdest...?
Schönen Gruß
Afra
hi Afra,
weil sich das nur auf die horizontale Ausrichtung bezieht, ich möchte den Text aber vertikal ausrichten.
mfg
_ash
Hallo ash!
Sorry, ich hab gepennt. ;o)
Schönen Gruß
Afra
Hello out there!
Wie wäre es, wenn Du etwas näherliegendes verwenden würdest...?
Wie soll das bei _vertikaler_ (das ist die Richtung oben–unten) Ausrichtung helfen? Du hattest doch nicht etwa die Änderung der Leserichtung im Sinn?
See ya up the road,
Gunnar
Hallo Gunnar!
Wie soll das bei _vertikaler_ (das ist die Richtung oben–unten) Ausrichtung helfen? Du hattest doch nicht etwa die Änderung der Leserichtung im Sinn?
Ich hab gerade wie der Pavlovsche Hund losgelegt. Irgendwie habe ich das vertikal nicht gelesen. Das ist bei mir wie mit rechts und links. Ich muss immer nachdenken, das geht nicht automatisch. Sorry für die Fehlinformation.
Schönen Gruß
Afra
Hello out there!
wie kann ich in einem div-tag den Text vertikal mittig ausrichten?
vertical-align: middle;
hat keinen Erfolg gebracht.
Was du in der Spec [CSS2 §10.8] nachlesen kannst.
See ya up the road,
Gunnar
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