CSS: vertical-align mit Divs?
- Ersteller Josh
- Erstellt am
Moritz K
Angesehenes Mitglied
Zitat aus Selfhtml:
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.
Mit einem DIV geht es also nicht.
Folgendes geht zum Beispiel:
CODE
<html>
<head>
<style type="text/css">
.oben { vertical-align:top; background-color:#CCCCCC; }
.mittig { font-size: 18pt; vertical-align:middle; background-color:#DDDDDD; }
.unten { vertical-align:bottom; background-color:#EEEEEE; }
</style>
</head>
<body>
<span class="oben">
fgkfkj
</span>
<span class="mittig">
fgkfkj
</span>
<span class="unten">
fgkfkj
</span>
</body>
</html>
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.
Mit einem DIV geht es also nicht.
Folgendes geht zum Beispiel:
CODE
<html>
<head>
<style type="text/css">
.oben { vertical-align:top; background-color:#CCCCCC; }
.mittig { font-size: 18pt; vertical-align:middle; background-color:#DDDDDD; }
.unten { vertical-align:bottom; background-color:#EEEEEE; }
</style>
</head>
<body>
<span class="oben">
fgkfkj
</span>
<span class="mittig">
fgkfkj
</span>
<span class="unten">
fgkfkj
</span>
</body>
</html>
Joel
Legendäres Mitglied
Vielleicht hilft dir auch dieser Link weiter:
http://www.domedia.org/oveklykken/css-vertical-align.php
Gruess,
Joel
http://www.domedia.org/oveklykken/css-vertical-align.php
Gruess,
Joel
Josh
Legendäres Mitglied
Dein Beispiel macht m.E. keinen Sinn, da es ja gar keine Höhenangaben enthält.
Folgendes funktioniert eben leider nicht im Firefox (IE weiss ich nicht):
CODE <html>
<head>
<style type="text/css">
.oben { vertical-align:top; background-color:#CCCCCC;height:200px; }
.mittig { font-size: 18pt; vertical-align:middle; background-color:#DDDDDD;height:200px; }
.unten { vertical-align:bottom; background-color:#EEEEEE;height:200px; }
</style>
</head>
<body>
<div class="oben">
fgkfkj
</div>
<div class="mittig">
fgkfkj
</div>
<div class="unten">
fgkfkj
</div>
</body>
</html>
Folgendes funktioniert eben leider nicht im Firefox (IE weiss ich nicht):
CODE <html>
<head>
<style type="text/css">
.oben { vertical-align:top; background-color:#CCCCCC;height:200px; }
.mittig { font-size: 18pt; vertical-align:middle; background-color:#DDDDDD;height:200px; }
.unten { vertical-align:bottom; background-color:#EEEEEE;height:200px; }
</style>
</head>
<body>
<div class="oben">
fgkfkj
</div>
<div class="mittig">
fgkfkj
</div>
<div class="unten">
fgkfkj
</div>
</body>
</html>
Michael Bieri
Angesehenes Mitglied
Nein, diese Eigenschaft gibts nicht bei Div's. Wenns denn wirklich mit Div's sein muss, dann kannst du das mit display:table-cell; hinmogeln dass es passt. Ist aber auch keine glückliche Lösung..
Jörg Kruse
Angesehenes Mitglied
Vielleicht noch eine Möglichkeit: von der Höhe des Divs die line-height abziehen und das ganze durch 2 teilen - das ergibt dann einen Wert, den man für padding-top und padding-bottom einsetzt