Bilder und Text vertikal zentrieren (xhtml 1.1)

[Mogler]

hallo gemeinde,

ein problem mit text-, input- und bildelementen, die zentriert werden sollen:

der IE interpretiert vertical-align leider nicht. das attribut 'align="middle"' gibts auch nicht (mehr).

ich möchte in einem div-container ein bild, ein text-field, diverse raiobuttons und text auf einer linie ausrichten - und das in jedem browser.

die bilder und die form-elemente sind in einer flucht - nur der text wird nach unten versetzt angezeigt.

mit float klappts leider auch nicht.

kennt jemand dieses problem oder noch besser ne lösung

danke & greez

 

[Shaddow]

1. der ie interprtiert valign!
2. middle = center

 

[Mogler]

hi,

es geht um xhtml 1.1/css

validator.w3.org sagt:

there is no attribute "valign"
there is no attribute "align"

per css gibt es lediglich 'verticali-align' und das geht wie gesagt nicht

http://www.w3.org/TR/REC-CSS1#vertical-align

trotzdem danke

zurück ins studio ...

 

[Martys]

Habe momentan das gleiche Problem und nach längerer Suche tappe ich noch immer im Dunkeln. Hat niemand einen Tipp?

 

[Gumbo]

Zeig doch bitte ein Beispiel.

 

[Quaese]

Hi,

mal schauen, ob ich Dein Problem richtig verstanden habe.

Der Div-Container hat eine feste Grösse. Innerhalb dieses Containers sollen die
Elemente vertikal zentriert ausgerichtet sein.

Möglich ist das über die absolute Positionierung der enthaltenen Elemente relativ
zum Container. Hierfür muss dem Div die Eigenschaft position: relative zugewiesen
werden.

Den inneren Elementen muss allen eine feste Höhe sowie die Eigenschaft position: absolute
zugewiesen sein. Sie werden zunächst 50% vom oberen Rand des Containers
platziert. Anschliessend werden sie mit Hilfe von margin um die Hälfte ihrer
Höhne "nach oben" repositioniert.

Zur Verdeutlichung ein Beispiel.

Zunächst die CSS-Definitionen:

/* Umschliessender Div-Container */
.outerDiv{ width: 600px;
           height: 400px;
           border: 1px solid black;
           position: relative;}

/* Bild erhält feste Höhe im IMG-Tag */
.outerDiv img{ position: absolute;
               top: 50%;}

/* Textfeld */
.outerDiv input.text{ position: absolute;
                      height: 20px;       /* feste Höhe zuweisen */
                      width: 80px;
                      top: 50%;           /* 50% vom oberen Rand */
                      margin-top: -10px;  /* um halbe Höhe repositionieren */
                      left: 125px;}

Der zugehörige HTML-Code:

<div class="outerDiv">
    <img style="margin-top: -60px;" src="bild.gif" width="120" height="120" border="0" alt="Bild">
    <input type="Text" class="text" name="text" value="wert">
</div>

Ich hoffe, das hilft Dir weiter.

Ciao
Quaese