# Bilder und Text vertikal zentrieren (xhtml 1.1)



## Mogler (16. April 2004)

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 (16. April 2004)

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


----------



## Mogler (16. April 2004)

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 (3. Juni 2004)

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


----------



## Gumbo (3. Juni 2004)

Zeig doch bitte ein Beispiel.


----------



## Quaese (3. Juni 2004)

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


----------

