bild in div vertikal zentrieren

[michael]

hallo,

ich habe ein <div> indem nur ein bild eingeschlossen ist.
diesem div habe ich per height: eine bestimmte höhe zugewiesen (wegen einem hintergrundbild des div's).

das bild in dem div ist weit weniger hoch als das div selber,
sodaß es immer am oberen rand "klebt" - wie kann ich dieses bild dazu bringen, sich vertikal in dem div zu zentrieren ?

vom code her sieht das so aus:

<div id="header">
 <img src="header.jpg" height="50px" width="100px" alt="Header">
</div>

css:

#header {
 height:200px;
 background:url(header-bg.jpg);
}

klar kann ich das logo auch 200px hoch machen, bzw. genauso hoch wie das div (oder die HG-Grafik), aber das will ich eigentlich nicht.
das HG-Bild soll auswechselbar bleiben und auch unterschiedliche höhen haben sollen, ohne das ich dabei auf das bild in dem <div> rücksicht nehmen müßte.

aber irgendwie will das nicht so recht klappen?
vertical-align:middle klappt nicht und line-height genausowenig?
könnte ihr mir da auf die sprünge helfen?

grüße,
daniel

[wahsaga]

hi,

das bild in dem div ist weit weniger hoch als das div selber,
sodaß es immer am oberen rand "klebt" - wie kann ich dieses bild dazu bringen, sich vertikal in dem div zu zentrieren ?

warum benutzt du dann nicht einfach padding(-top)?

gruß,
wahsaga

[michal]

warum benutzt du dann nicht einfach padding(-top)?

hi,

müßte nicht auch

#header img {
 margin: auto 0 auto 0;
}

funktionieren?

grüße,
michael

[Zeromancer]

Hallo,

#header img {
 margin: auto 0 auto 0;

benutzt man 'margin' eigentlich nur für Blockelemente?

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

müßte nicht auch
#header img {
margin: auto 0 auto 0;
}
funktionieren?

Nein, wegen:

10.6.2 Inline, replaced elements block-level, replaced elements in normal flow, and floating, replaced elements

If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their computed value is 0. If 'height' is 'auto', the computed value is the intrinsic height.

http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins

cu,
Andreas

[chlori]

Hi

<img src="header.jpg" height="50px" width="100px" alt="Header">

Ohne Pixelangaben:
<img src="header.jpg" height="50" width="100" alt="Header">

#header {
 height:200px;
 background:url(header-bg.jpg);
}

Zu deiner Frage:

<div
 <img style="position:relative; top: 75px;
 src="header.jpg" height="50" width="100" alt="Header">
</div>

Gruss
chlori

[Michael - Hannover]

vertikale Zentrierung ohne feste px Werte scheint in css irgendwie immer ein Problem zu sein

meine bisherige Lösung

<table width="100%" style="height:100%">

<tr>
<td style="text-align:center;">

<--! Inhalt "center" Anweisung ist nicht unbedingt nötig-->

</td>
</tr>

</table>

funktioniert...ist allerdings nicht 100% valide

[wahsaga]

hi,

vertikale Zentrierung ohne feste px Werte scheint in css irgendwie immer ein Problem zu sein

hier _haben_ wir aber feste px-werte.

gruß,
wahsaga

[Michael - Hannover]

hier _haben_ wir aber feste px-werte.

naja er meinte ja, das das Bild in der Größe varieren darf/soll, und schon passen Pixel-Einstellungen nicht mehr

ich hoffe einfach, dass die nächsten Browser-Generationen endlich mit margin:auto Werten richtig umgehen

[at]

Hallo.

ich hoffe einfach, dass die nächsten Browser-Generationen endlich mit margin:auto Werten richtig umgehen

Tun sie das nicht längst?
MfG, at

[MudGuard]

Hi,

ich hoffe einfach, dass die nächsten Browser-Generationen endlich mit margin:auto Werten richtig umgehen
Tun sie das nicht längst?

Doch, tun sie - selbst der IE kann es (im Standard mode).
Siehe auch [pref:t=83637&m=489121]

cu,
Andreas