benötige Hilfe für vertical-align

[steffenk]

Hallo,

ich bekomme den Text nicht vertikal mittig
Habe ein Div mit 2 Bildern und einem Text, aber der Text klatscht immer an der baseline

.viheader{
	text-align:center;
	font-size:14px;
	font-weight:bold;
	vertical-align:middle;
	border-bottom: 1px dashed #000;
	margin-bottom:10px;
}

und

<div class="viheader"><img src="img/instrumentenschau.gif" width="30" height="23" hspace="24" alt="vi">Virtuelle Instrumentenschau<img src="img/instrumentenschau.gif" width="30" height="23" alt="vi" hspace="24"></div>

kann mir jemand helfen?

[hero-master]

Hi Steffen
vertical-align hat bei Divs eine andere "Bedeutung" als bei Tabellen
Schönes Beispiel:
http://www.css4you.de/example/vertical-align.html
http://www.css-blog.com/index.php?p=77&more=1&c=1

Wenn du mit einer festen Höhe arbeitest, kannst du das ganze mit line-height erreichen

[rewboss]

Nun ja, das ist die Sache mit CSS vertical-align: du denkst, das müsste genau dasselbe sein wie HTML valign, ist es aber nicht. Es dient dazu nicht, um Inhalt innerhalb eines Block-elements oder einer Tabellenzelle vertikal auszurichten, sondern um Inline-elemente miteinander auszurichten. Das heißt, es ersetzt nicht valign, sondern eher <sub> und <sup>, wobei die Schriftgröße dabei nicht geändert wird.

Es ersetzt zum Teil auch align="..." in <img>-Tags. Das hier:

<p>Hier kommt ein <img src="bild.gif" align="middle" /> Bild</p>

kannst du ersetzen mit:

<p>Hier kommt ein <img src="bild.gif" style="vertical-align: middle;" /> Bild</p>

...was in deinem Fall wohl zum erwünschten Ergebnis führt. Allerdings sind die zwei Angaben nicht ganz genau gleich, denn die CSS-Version nimmt als Referenz ein halbes ex über der Baseline -- die meisten Browser nehmen 1ex = 0,5em. Versuch mal:

<p>Hier <img src="bild.gif" align="middle" /> ist ein gro&szlig;es Bild, und hier <img src="bild.gif" style="vertical-align: middle;" /> ist dasselbe Bild nochmal.</p>

[steffenk]

@hero-master danke für den Tipp

Trotzdem hadere ich mit dem Verständnis:

vertical-align zentriert das Element doch vertikal anhand der Höhe des Containers.

Habe ich ein div, dann wird das doch so hoch, wie Inhalt + padding das zulassen.
In meinem Beispiel habe ich doch Bilder, die eine Höhe haben und dadurch die Höhe des divs bestimmen.
Warum greift das trotzdem nicht ?

Edit @rewboss hatte Dein Posting noch nicht gesehen.
Ich will ja nicht die Bilder positionieren, sondern den Text dazwischen

[steffenk]

Ahhhh ich Depp

natürlich bezieht sich das div ja auf den äusseren Container.
Also muss ich den Text in ein span hängen und dieses mit vertical-align

EDIT: nee, geht auch nicht:

<div class="viheader">
<img src="img/instrumentenschau.gif" width="30" height="23" hspace="24" alt="vi">
<span style="vertical-align:middle;">
Virtuelle Instrumentenschau
</span>
<img src="img/instrumentenschau.gif" width="30" height="23" alt="vi" hspace="24"></div>

entweder sind die 23 Pixel zu wenig oder ich kapiers doch nicht und muss den Umweg über line-height machen

[rewboss]

Zitat von St@eff.en

Ich will ja nicht die Bilder positionieren, sondern den Text dazwischen

Genau. Probier doch meinen Vorschlag aus.

Innerhalb der Tabellenzelle wird alles vertikal mittig ausgerichtet. Jetzt hast du etwas Text mit Inline-Bildern drin. Wegen der Bilder wird nun die Zeile höher. Diese Zeile wird dann mittig ausgerichtet, wobei die Unterkanten der Bilder mit der Baseline des Textes ausgerichtet werden. Richtest du die Bilder mittig aus, so wird die Zeile nicht höher, aber es wird so aussehen, als hätte sich der Text mittig ausgerichtet.

Das kannst du viel besser verstehen, wenn du dir vorstellst, das Bild wäre nicht so groß wie der Text.

[steffenk]

@rewboss Danke, mit den Bildern funktioniert es. Verstanden hab ichs immer noch nicht - da werd ich wohl meinen Gebetsteppich holen müssen und ein wenig meditieren

[rewboss]

Also, hier habe ich versucht, es zu erklären.

Angehängt zwei Bilder: der Ist-Zustand und der Soll-Zustand. Der grüne Rahmen ist die Zeile, der rote die Tabellenzelle.

Im Ist-Zustand haben wir einen Text und ein Bild, letzteres ist do ausgerichtet, dass die Unterkante des Bildes auf der gleiche Höhe ist, wie die Baseline des Textes. Die Zeile reicht dann von der Unterkante des Textes bis zur Oberkante des Bildes. Die gesamte Zeile wird in der Zelle mittig ausgerichtet.

Im Soll-Zustand haben wir nur das Bild mittig ausgerichtet, sonst nix. Das Bild richtet sich so aus, dass der Mittelpunkt des Bildes auf der gleiche Höhe ist, wie der Mittelpunkt des Textes. Die Zeile reicht dann von der Unterkante des Bildes bis zur Oberkante des Bildes, und die gesamte Zeile wird in der Zelle mittig ausgerichtet. Das sieht dann so aus, als hättest du den Text ausgerichtet, aber in wirklichkeit hast du das Bild ausgerichtet, und der Browser macht den Rest.

[steffenk]

ok, das hilft mir ! herzlichen Dank rewboss

:P - kann ich den Gebetsteppich wieder einrollen

Der Knackpunkt war das Verständnis über die Mittellinie. Ich hab den Container als kasten gesehen und davon die Mitte zugrunde gelegt.
Nun wird alles besser ...