nicht angemeldet
Hallo,
dass CSS, bzw. Umsetzung durch Browser, immer Probleme hatte mit vertikaler Zentrierung ist ja bekannt. Aus diesem und ein paar anderer CSS-Gründe bin ich nach wie vor Tabellenanhänger, wenngleich sich das bei mir prozentual im Lauf der Jahre und besserer Browserunterstützung etwas zugunsten CSS verschoben hat.
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):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
*{margin:0;padding:0;}
div{
display:inline-block;
margin:10px;
padding:5px;
width:100px;
height:100px;
color:red;
border:3px solid navy;
text-align:center;
vertical-align:middle;
}
</style>
</head>
<body>
<div>text</div>
<div>text</div>
<div>text</div>
</body>
</html>
Nur leider ist der Text nicht vertikal zentriert, 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.
Naja, wie auch immer, empfohlen wird auf diversen Seiten, das Ganze zu ändern in:
display:table-cell
Oh Wunder, anstatt direkt eine Tabelle zu nehmen, tue ich jetzt einfach so (also eine Krücke) und der Text ist tatsächlich zentriert. Doch was ist das? Dann haben die DIV-Blöcke keinen Abstand mehr zueinander und das trotz margin-Angabe.
Was mache ich nun, doch eine echte Tabelle nehmen oder gibt es eine sinnvolle CSS-Lösung?
Gruss
Mike
Der Martin
JürgenB
Gunnar Bittersmann