Zur Navigation

vertical-align:bottom ... und nix passiert

1 Domenika

Hallo

Ich habe folgendes div:

<div style="width:30%; text-align:center; vertical-align:bottom; height:100px;>Text</div>

Aber auf das vertical-align:bottom hört er partout nicht...

Any ideas?

domenika

20.02.2007 11:25

2 Domenika

Hi Jörg

danke für die schnelle Antwort.

Ich dachte, ich könnte ein div definieren, mit einer bestimmten Größe (width+height), innerhalb dessen ich dann den Inhalt (Text, Bild) positionieren kann (z.B. mit bottom). So wie in einer Tabellen-Zelle.
So geht's wohl nicht ;)

Danke Dir!
Domenika

20.02.2007 12:16

3 Jörg Kruse

Hallo domenica,

auf SELFHTML ist beschrieben, wann vertical-align verwendet werden kann:

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.

In deinem Beispiel würde ich stattdessen mit padding-top arbeiten:

<div style="width:30%; text-align:center; padding-top:85px">Text</div>

PS: das, was ich in meinem vorhergehenden Posting geschrieben hatte, war Unsinn (ich hatte es wohl erst gelöscht, nachdem du es bereits gelesen hast)

20.02.2007 12:22

4 Domenika

Hi Jörg

SelfHTML hab ich natürlich auch schon konsultiert und hoffte aber, dass sich das auch einfach auf ein Größen-definiertes-div anwenden ließe.

padding-top ist natürlich eine Alternative, aber ich hatte gehofft eine Lösung ohne feste Größen-Angabe zu finden (also ohne feste px oder so). Geht wohl nicht.
Tja, mal sehen ob ich jetzt einen dirty work-around mit Table mache oder ein padding.

Danke Dir in jedem Fall!
domenika

20.02.2007 12:32

5 Rudy

Zur Erheiterung eine Lösung, die ohne IE ginge:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
</head>
<style type="text/css">
<!--
div { border: 1px solid; display: table-cell; height: 100px; text-align: center; vertical-align: bottom; width: 200px; }
p { border: 1px solid; margin: 0; padding: 0; }
-->
</style>
<body>
<div><p>Text</p></div>
<div><p>Text</p></div>
<div><p>Text</p></div>
</body>
</html>

20.02.2007 12:56

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]