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 ;)
text-align + vertical align i div
2 svar · 3 596 visningar · startad av voigtann1
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 */
}
Se även t.ex. http://www.ibloomstudios.com/articles/vertical-align_misuse/ och http://www.ibloomstudios.com/articles/applied_css_vertical-align/ :bire
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>