vertical-align Problem

[Dornii]

Hallo,

habe ein div-Element, in dem ich ein Bild positioniere. Und dieses möchte ich gerne zentriert in diesem Element darstellen. So:

<div style="width:50; height:50; overflow:hidden; vertical-align:middle;"><img src="bild.gif" border="0" alt=""></div>

Leider funktioniert vertical-align:middle; überhaupt nicht. Was mach ich verkehrt?

[MudGuard]

Hi,

<div style="width:50; height:50; overflow:hidden; vertical-align:middle;"><img src="bild.gif" border="0" alt=""></div>
Leider funktioniert vertical-align:middle; überhaupt nicht. Was mach ich verkehrt?

Du versuchst, vertical-align auf ein Element anzuwenden, auf das es nicht anwendbar ist.

cu,
Andreas

[MudGuard]

Hi,

Nachtrag:

<div style="width:50; height:50; overflow:hidden; vertical-align:middle;"><img src="bild.gif" border="0" alt=""></div>

width und height erwarten eine Länge, nicht eine Zahl.

cu,
Andreas

[Andy]

<div style="width:50; height:50; overflow:hidden; vertical-align:middle;"><img src="bild.gif" border="0" alt=""></div>

Da du keine Postion angegeben hast, ist das bild ganz links oben.
Gib mal bei width 100% an.

Außerdem: Bei CSS müsten width, height, top, left, ... nicht nur mit der Zahl sondern auch mit dem Format bezeichnet werden.
Also so: height:50px

Andy

[Thomas Luethi]

Hallo,

<div style="width:50; height:50; overflow:hidden; vertical-align:middle;"><img src="bild.gif" border="0" alt=""></div>
Leider funktioniert vertical-align:middle; überhaupt nicht. Was mach ich verkehrt?

Erstens hast Du keine Einheiten angegeben. Du meinst wohl 50px.

Zweitens wirkt vertical-align nur auf
Inline-Elemente und Tabellenzellen.

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
"vertical-align
  Applies to: inline-level and 'table-cell' elements"

Gruesse,

Thomas

[Dornii]

Erstens hast Du keine Einheiten angegeben. Du meinst wohl 50px.

Dachte immer px sei das Stadardmaß und muss nicht angegeben werden.

Zweitens wirkt vertical-align nur auf
Inline-Elemente und Tabellenzellen.

Was sind den Inline-Elemente?

Kann man mein problem trotzdem irgendwie lösen, ohne das ich jetzt überall ne Tabelle aussen rum machen muss?

[wahsaga]

hi,

Erstens hast Du keine Einheiten angegeben. Du meinst wohl 50px.

Dachte immer px sei das Stadardmaß und muss nicht angegeben werden.

falsch gedacht.

Zweitens wirkt vertical-align nur auf
Inline-Elemente und Tabellenzellen.

Was sind den Inline-Elemente?

auweia. dir fehlt offenbar einiges an grundlagenwissen.

gruss,
wahsaga

[Thomas Luethi]

Hallo,

Dachte immer px sei das Stadardmaß und muss nicht angegeben werden.

Nur in HTML. Dort _darf_ man "px" nicht schreiben.
In CSS muss (ausser bei 0) immer die Einheit angegeben werden.

Was sind den Inline-Elemente?

Lies mal hier:
http://selfhtml.teamone.de/html/referenz/elemente.htm#block_elemente

http://www.htmlhelp.com/reference/html40/inline.html
http://www.htmlhelp.com/reference/html40/block.html

Fuer CSS gilt fast die gleiche Aufteilung.

Kann man mein problem trotzdem irgendwie lösen, ohne das ich jetzt überall ne Tabelle aussen rum machen muss?

Am einfachsten und zuverlaessigsten:
Wenn Du weisst, wie gross das Bild ist, kannst Du
ja auch fuer das Bild oben und unten einen entsprechenden
margin machen. Oder fuer den DIV ein padding.

Also wenn der DIV 50px hoch ist und das Bild 36px, dann muss
oben und unten am Bild ein Abstand von 7px sein.

---

Um vertical-align:middle auch beim DIV anzuwenden,
koenntest Du versuchen, den DIV zu einem
"Inline"- oder "Tabellenzellen"-Element zu machen.

div { display:inline; }
oder
div { display:table-cell; }
oder evtl. (CSS 2.1)
div { display:inline-block; }

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display
http://www.w3.org/TR/CSS21/visuren.html#display-prop

Ob's was bringt, und wenn ja, in welchen Browsern, weiss ich nicht.

Kannst ja mal ausprobieren und dann hier Deine Ergebnisse
bekanntgeben - fuer uns und auch fuer's Archiv.

Kleiner Tip noch: Um zu sehen, wie gross der DIV ist,
kannst Du ihm voruebergehend einen sichtbaren Rahmen geben:
div { border:1px dotted red; }

Gruesse,

Thomas

[Dornii]

Um vertical-align:middle auch beim DIV anzuwenden,
koenntest Du versuchen, den DIV zu einem
"Inline"- oder "Tabellenzellen"-Element zu machen.

div { display:inline; }
oder
div { display:table-cell; }
oder evtl. (CSS 2.1)
div { display:inline-block; }

Das hat jetzt alles nix gebracht.
Aber wenn ich meine width- und height-Angaben weglasse, passts eigentlich auch für meine Zwecke.

Danke derweil