Hallo zusammen,
wie kann man via css einen Bereich vertikal ausrichten. Ich versuche es immer und immer wieder, aber bei mir will das nicht klappen. Hier mal mein Code:

HTML-Code:

<div id="partner"><div id="partner_schrift">Partner</div><div id="partner_picture">Hier sind nacher Bilder drin</div></div>

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#partner{     width:561px;     height:103px;     background-image:url(Bilder/index_18.png); }   #partner_schrift{     width:50px;     position:absolute;     z-index:3;     font-weight:bold;     color:#999; }   #partner_picture{     display:table;     vertical-align:middle; }

Danke schon mal im vorraus.

MfG
EGJSoldier

Guck mal hier: http://www.css4you.de/Texteigenschaf...cal-align.html
Da steht, dass diese Eigenschaft nicht vererbbar ist, deshalb musst du diese Eigenschaft bei jedem Bild einzeln definieren.

Hi,

hier mal ein paar Beispiele zur vertikalen Ausrichtung für unterschiedliche Anwendungsbereiche:

• http://www.pmob.co.uk/temp/vertical-align-examples.htm
• http://www.pmob.co.uk/temp/vertical-align3.htm
• http://www.pmob.co.uk/temp/vertical-align9.htm (lässt sich auch auf vertical-align:middle umstellen)
• http://www.pmob.co.uk/temp/vertical-align11.htm

mfg Maik

Zitat von EGJSoldier

Hier mal mein Code:

HTML-Code:

<div id="partner"><div id="partner_schrift">Partner</div><div id="partner_picture">Hier sind nacher Bilder drin</div></div>

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#partner{     width:561px;     height:103px;     background-image:url(Bilder/index_18.png); }   #partner_schrift{     width:50px;     position:absolute;     z-index:3;     font-weight:bold;     color:#999; }   #partner_picture{     display:table;     vertical-align:middle; }

Für die modernen Browser, die die erforderlichen Tabelleneigenschaftswerte der display-Eigenschaft interpretieren, lautet das dazugehörige CSS so:

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#partner{         width:561px;         height:103px;         background-image:url(Bilder/index_18.png);         display:table; }   #partner_schrift{         width:50px;         position:absolute;         z-index:3;         font-weight:bold;         color:#999; }   #partner_picture{         display:table-cell;         vertical-align:middle; }   #partner_picture img {         display:inline;         vertical-align:middle; }

Für diejenigen, die display:table und display:table-cell nicht interpretieren, siehe den Quellcode des Beispiels http://www.pmob.co.uk/temp/vertical-align3.htm aus meiner Liste.

mfg Maik

Danke euch beiden. habe s hinbekommen.

MfG
Scantraxx