✔ Vertikal ausrichten

[EGJSoldier]

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:

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

#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

 

[ComFreek]

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

 

[Maik]

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

 

[Maik]

Hier mal mein Code:

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

#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:

#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

 

[EGJSoldier]

Danke euch beiden. habe s hinbekommen.

MfG
Scantraxx