Jeg har et div-element som inneholder tekst, og jeg vil justere innholdet i denne div vertikalt midt.
Her er div-stilen min:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Hva er den beste måten å gjøre dette på?
Du kan prøve denne grunnleggende tilnærmingen:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Det fungerer imidlertid bare for en enkelt linje med tekst, fordi vi setter linjens høyde til samme høyde som det inneholdende bokselementet.
Dette er en annen måte å justere tekst vertikalt på. Denne løsningen vil fungere for en enkelt linje og flere linjer med tekst, men den krever fortsatt en beholder med fast høyde:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
CSS bare størrelser <div>
, vertikalt senter justerer <span>
ved å sette <div>
's linjehøyde lik dens høyde, og gjør <span>
en inline-blokk med vertical-align: middle
. Deretter setter den linjehøyden tilbake til normal for <span>
, slik at innholdet vil flyte naturlig inne i blokken.
Og her er et annet alternativ, som kanskje ikke fungerer på eldre nettlesere som ikke støtter display: table
og display: table-cell
(i utgangspunktet bare Internet Explorer 7). Ved hjelp av CSS simulerer vi tabellatferd (siden tabeller støtter vertikal justering), og HTML-en er den samme som i det andre eksemplet:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Denne teknikken bruker et absolutt posisjonert element som setter topp, bunn, venstre og høyre til 0. Det er beskrevet mer detaljert i en artikkel i Smashing Magazine, Absolutt horisontal og vertikal sentrering i CSS.
Du kan enkelt gjøre dette ved å legge til følgende CSS-kode:
display: table-cell;
vertical-align: middle;
Det betyr at CSS-en din endelig ser ut som:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
For en enkelt tekstlinje (eller et enkelt tegn) kan du bruke denne teknikken:
Den kan brukes når #box
har en ikke-fast, relativ høyde i %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Se en live demo på JsBin (enklere å redigere CSS) eller [JsFiddle][2] (enklere å endre høyden på resultatrammen).
Hvis du vil plassere indre tekst i HTML, ikke i CSS, må du omslutte tekstinnholdet i et ekstra inline-element og redigere #box::after
for å matche det. (Og selvfølgelig bør content:
-egenskapen fjernes).
For eksempel
<div id="box"><span>TextContent</span></div>
.
I dette tilfellet skal #box::after
erstattes med #box span
.
For støtte for Internet Explorer 8 må du erstatte ::
med :
.