nicht angemeldet
Nun stehe ich wieder vor so einem Dilemma, entweder Tabelle oder CSS. Ziel ist es einige "Boxen" nebeneinander zu zeigen und diese mit zentriertem Text (horizontal und vertikal). Dazu nutze ich (vereinfachter Beispielcode):
div{
display:inline-block;
margin:10px;
padding:5px;
width:100px;
height:100px;
color:red;
border:3px solid navy;
text-align:center;
vertical-align:middle;
}
<div>text</div>
Nur leider ist der Text nicht vertikal zentriert,
Warum sollte er auch, du hast ihn nirgends vertikal zentriert, jedenfalls nicht vertikal in deinen Kästchen.
vertical-align bezieht sich bei Blockelementen seit jeher auf die Elemente einer Zeile. Wenn du ein fünf Zeilen hohes Bild in eine Zeile setzt, dann wird der Text bei vertical-align:middle mittig an das Bild gesetzt:
blafasel <img> dingsbumms<br>
noch eine zeile
ergäbe dementsprechend
+---------+
| |
blafasel | Bild | dingsbumms
| |
+---------+
noch eine zeile
Willst du deinen Kästcheninhalt selbst mittig haben, dann muss, erstens, das äußere Kästen eine Zeilenhöhe (line-height) in der Größe des Kästchens (height - padding) bekommen, damit das Kästchen nur eine Zeile enthält, in der mit vertical-align zentriert werden kann. Zweitens muss der Inhalt zusammengefasst und als Zeilenelement ausgezeichnet werden, also display:inline-block.
<head>
<style>
div.aussen {
display:inline-block;
padding:5px;
width:100px;
height:100px;
line-height:90px;
border:1px solid red;
vertical-align:middle;
text-align:center;
}
div.aussen > div {
display:inline-block;
} border:1px solid blue;
</style>
</head>
<body>
<div class="aussen"><div>text</div></div>
<div class="aussen"><div>text</div></div>
<div class="aussen"><div>text</div></div>
</body>
Das wäre dann die Fassung für alte Browser. Dass CSS3 mitnichten ein Problem mit vertikaler Zentrierung hat, wurde dir ja schon mehrfach mit dem Hinweis auf das durchaus breit unterstützte Flexbox-Prinzip deutlich gemacht.
zumindest nicht im IE 10 oder FF Vers. 19.0.2.
Das kann doch nicht wahr sein, nach allen diesen Jahren, dass dies immer noch nicht geht.
Vielleicht solltest du auch "alle paar Jahre" mal deinen Browserpark aktualisieren. Firefox 19 hat schon ein paar Tage auf dem Buckel und der IE 10 ist auch von gestern.
Der Martin
JürgenB
Gunnar Bittersmann