HTML: div - vertical alignment

Der findes vist ikke en normal vertical-alignment-funktion i CSS, så du må gøre sådan her:

<div style="height:100px;width:30px;padding:30px;border:1px #000000 solid;">Her er noget tekst</div>

Ja, vertical-alignment fungerer ikke som det gør på tabeller - derfor jeg satte det i anførselstegn.

Da teksten i div'et varierer, er jeg nødt til at have sådan at den sætter det i midten uden at jeg skal definere en padding.

Hvad så med:

<div style="height:100px;width:60px;border:1px #000000 solid;">
  <div style="position:relative;top:50%">Her er noget tekst</div>
</div>
?

Når jeg ser denne kode i Firefox, så ligger teksten i bunden af div'et :(

Gør det også i IE:
http://demaweb.dk/uploads/test3.html

Det kan ikke lade sig gøre. På Firefox kan du gøre det ved at sætte margin: auto; - men det virker naturligvis ikke på IE, og derfor er det en dårlig løsning. Hvis du vil have noget med dynamisk indhold centreret lodret, er tabeller eller script den eneste kompatible løsning. Indtil videre.

-- eller man kan bruge thebox' deadcentre, som også virker i enkeltstående elementer: http://www.wpdfd.com/editorial/thebox/deadcentre4.html !-)

Jeg foretrækker at give div'et en tabel celles egenskaber.

Dybt forkert, men giver flot markup :)

http://www.christianfecteau.com/echo/css_centered_layout/

/JJ

:

#outer {
    display: table;
    height: 100%;
    margin: 0 auto;
}

#middle {
    display: table-row;
}

#inner {
    display: table-cell;
    vertical-align: middle;
}

roenving - Ikke med dynamisk indhold, nej.

Nej, det er rigtigt, til det findes der semantisk og kodemæssigt korrekt kun tabelceller !-)

Smider I lige et svar?

.lukker