css vertical-align in block-element?

heli2sky · 31.03.2004, 17:09

wie funktioniert das? vertical-align geht ja nur in inline-elementen, aber irgendwie muss das ja möglich sein... mit 50% gehts wieder nur im IE gscheit, oder?

jak · 31.03.2004, 20:47

Ich hab in selfhtml eigentlich nichts darüber gefunden, daß das nur bei Inline-Elementen geht.

Zitat:

Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

Bei Fließtext ist auch eine prozentuale Angabe ist möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.

Jak

heli2sky · 31.03.2004, 21:34

Zitat:

http://www.jendryschik.de/wsdev/einf...srichtung.html

vertical-align
Der rechteckige Bereich, der eine Zeile Inline-Elemente enthält, nennt sich Zeilen-Box (line box). Diese Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box.
Mit der Eigenschaft vertical-align bestimmen Sie die vertikale Ausrichtung von Boxen innerhalb der Zeilen-Box. Diese Eigenschaft lässt sich nur auf Inline-Elemente oder Tabellenzellen (bzw. auf Elemente mit display:inline oder display:table-cell) anwenden.

Zitat:

http://www.w3.org/TR/REC-CSS2/visude...vertical-align

'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

das bedeutet??

santi · 01.04.2004, 02:24

Hi,
das bedeutet das vertical-align nur funktioniert wenn es ein "Eltern-Element" gibt.

Schau Dir das Beispiel an, ich versuche dabei den blauen Text hochzustellen:

Code:

<head>
<title>Vertikale Ausrichtung</title>
<style type="text/css">
p {font-size: 60px;border: 1px solid black;}
span {font-size: 40px;border: 1px solid green;color:blue;}
em {border: 1px solid red;font-size: 14px;color:red;}
</style>
</head>

<body>
<span style="vertical-align:top">Hier
<em style="vertical-align:top">auf Top ausgerichtet[/i] geht es nicht.</span>






Hier<span style="vertical-align:top">Jetzt bin ich
<em style="vertical-align:top">auf Top ausgerichtet[/i] auch hochgestellt.</span>geht es.</p>
</body>
</html>

Gruß
santi

heli2sky · 01.04.2004, 15:24

danke für das schöne beispiel! alles klar.

31.03.2004, 17:09	#1
heli2sky Master Registriert seit: 02.10.2001 Alter: 39 Beiträge: 523	css vertical-align in block-element? wie funktioniert das? vertical-align geht ja nur in inline-elementen, aber irgendwie muss das ja möglich sein... mit 50% gehts wieder nur im IE gscheit, oder? ____________________________________ Lang ist der Weg durch Lehren, kurz und wirksam durch Beispiele. Lucius Annaeus Seneca ...:::www.modellbaulexikon.org:::... www.acrobat-se.org \| www.ams-8c.de.vu

01.04.2004, 15:24	#5
heli2sky Master Registriert seit: 02.10.2001 Alter: 39 Beiträge: 523	danke für das schöne beispiel! alles klar. ____________________________________ Lang ist der Weg durch Lehren, kurz und wirksam durch Beispiele. Lucius Annaeus Seneca ...:::www.modellbaulexikon.org:::... www.acrobat-se.org \| www.ams-8c.de.vu

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)