Vertikal sentrering av element med CSS ?

[Langbein]

Jeg er hjemme og har kraftig influensa i dag, så kanskje min "reduserte" tilstand gjør at jeg overser noe helt åpenbart

 

Men der hvor det er enkelt å sentrere objekter horisontalt, finner jeg i farta ingen måte å gjøre det vertikalt på. F.eks at jeg vil ha en <div> med noe tekst+bilde helt på midten av en ellers tom webside.

 

Må man ty til javascript-hacks for å få det til nøyaktig?

[Runar0]

Vist du skal sentrere eit blokk element så kan du bruke position absolute i kombinasjon med top: 50%; margin-top: -(høgde/2)

[Runar]

Les litt av det som står på denne siden, så kan det hende du finner løsningen.

 

Jeg nevner også at for å midtstille tekst vertikalt i en div, kan du sette line-height til den samme verdien som høyden på div'en.

[Langbein]

Vist du skal sentrere eit blokk  element så kan du bruke position absolute i kombinasjon med top: 50%; margin-top: -(høgde/2)

9454346[/snapback]

Den var ganske smart

 

Eneste ulempen er at man må vite høyden på elementet. Det funker jo greit til grafikk, men er kanskje litt dumt til større mengder tekst.

[mikk-]

Hvis du har større mengder tekst er det kanskje uansett litt teit å midtstille det vertikalt?

[Langbein]

Hvis du har større mengder tekst er det kanskje uansett litt teit å midtstille det vertikalt?

9456007[/snapback]

Jeg mente forsåvidt ikke å skrive lange avhandlinger midstilt

 

Tenkte på f.eks. et bilde + litt tekst til. Og jeg er ikke så fan av å definere absolutte lengder hvis man kan unngå det.

 

Fant forresten en ganske elegant CSS-snutt som gjør det jeg ønsker:

.centered {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 50%;
 height: 50%;
 margin: auto;
 background-color: red;
 color: white;
}

 

Og den funker ypperlig i alle browserne jeg bruker - men IE klarer det ikke selv om det er gyldig css. Selv ikke IE 7.0

 

Neste gang jeg skal mekke meg en webside kommer jeg ikke til å gidde å teste i IE i det hele tatt. Om sida så blir seende ut som en dass i IE

Endret 9. september 2007 av Langbein