text-align + vertical align i div

2 svar · 3 596 visningar · startad av voigtann1 17 sep. 2007

voigtann1Medlem sedan juni 20019 519 inlägg

Frågan17 sep. 2007 19:44#1

Hur ska jag skriva för att få text/annan div i en div centerad.
Har just nu skrivit

#center {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
}

men jag får inte texten vertical aligned ;)

jarvkloMedlem sedan juli 20013 378 inlägg

17 sep. 2007 21:16#2

Hmm...

vertical-align funkar enligt CSS2 bara på två typer av element:

Dels "inline-taggar" (som t.ex. span) där den anger hur innehållet skall justeras i höjd gentemot gentemot typsnittets baslinje eller "inline-blockets" kanter,
och dels i "table cells" - och det är antagligen därifrån många av oss vant sig vid dess beteende i "block-liknande" omgivningar ;)

... och stödet för "display:table-cell", som annars skulle kunna vara ett bra alternativ eftersom det enligt specen skall få din div att bete sig som en tabellcell (inklusive vertikalcentreringsmöjligheterna), är inte är helt hundraprocentigt (ursäkta ordvitsen) infört det heller i alla dagens webbläsare....

Men det är klart - beroende på vad du vill kunna göra (och om du kan uppskatta innehållets totalhöjd eller ej) kan du kanske ha användning för genvägen med "negativ toppmarginal"?

#center {
position:absolute;
top:50%;
width:100%;
text-align:center;
font-size: 1em;
margin-top:-.5em; /* "dra upp" texten motsvarande sisådär halva typsnittshöjden */ 
}

Testa

Se även t.ex. http://www.ibloomstudios.com/articles/vertical-align_misuse/ och http://www.ibloomstudios.com/articles/applied_css_vertical-align/ :bire

tantenMedlem sedan nov. 20051 596 inlägg

17 sep. 2007 22:27#3

En variant som jag haft liggandes oanvänd så jag vet inte om det fungerar i IE7.
Men som du kan se så är det nästan en helt egen kodning för IE...
Om någon vill testa... så är hel fil med.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test textcentrering</title>
<style type="text/css"> 
/* för alla utom IE */
#nonie {width:350px; height:400px; 
background:#eee; border:1px solid #777; 
text-align:center; display:
table-cell; vertical-align:middle;
}
div.holder p {margin:0 auto; }
</style> 
<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#baraiekant {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#baraie {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
</head>
<body>
<div id="nonie">
<span id="baraiekant"></span> 
<span id="baraie"><p>Text i mitten...<br>halloj!</p></span>
</div>
</body>
</html>