nicht angemeldet
Hi,
ich scheitere gerade an dem Problem in einem A-Tag enthaltenen Text vertikal zu zentrieren.
Vertikal ist in Css eher mühsam. Ich habe mal einen Hack gebastelt, der vielleicht weiterhilft:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
a.verticalcentered {
display: block;
height: 100px;
width: 100px;
border: 1px solid red;
}
a.verticalcentered em {
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
background: green;
}
a.verticalcentered span {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="main">
<a class="verticalcentered">
<em></em>
<span>Text<br>text</span>
</a>
</div>
</body>
</html>
Prinzip: vertikale Zentrierung ist nur für Zeilen vorgesehen, nicht aber für Inhalte. Ich setze ein Element auf die erforderliche Höhe und weise ihm die Eigenschaft: vertical-align zu. Dieses Element bestimmt nun meine "Zeile". Ein weiteres Element nimmt nun einen - möglicherweise mehrzeiligen - Inhalt auf und richtet sich innerhalb der Zeile entsprechend aus.
Hilfreich ist hier die Eigenschaft inline-block, die es mir erlaubt, eine Höhe zuzuweisen, ohne das ich den Zeilenumbruch bekomme.
Gruesse, Joachim
Am Ende wird alles gut.
Gunnar Bittersmann
Der Martin