Minulla on div-elementti, joka sisältää tekstiä, ja haluan kohdistaa tämän div-elementin sisällön pystysuoraan keskelle.
Tässä on div-tyylini:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Mikä on paras tapa tehdä tämä?
Voit kokeilla tätä peruslähestymistapaa:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Se toimii kuitenkin vain yhdelle tekstiriville, koska asetamme rivin'n korkeudeksi saman korkeuden kuin sisältävä laatikkoelementti.
Tämä on toinen tapa kohdistaa teksti pystysuoraan. Tämä ratkaisu toimii sekä yhden rivin että useamman rivin tekstille, mutta se vaatii silti kiinteän korkuisen säiliön:
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 vain kokoa <div>
, keskittää <span>
vertikaalisesti keskelle asettamalla <div>
'n rivikorkeus yhtä suureksi kuin sen korkeus, ja tekee <span>
sta inline-lohkon, jonka vertical-align: middle
. Sitten se asettaa <span>
:n rivikorkeuden takaisin normaaliksi, jotta sen sisältö kulkee luonnollisesti lohkon sisällä.
Ja tässä on toinen vaihtoehto, joka ei ehkä toimi vanhemmissa selaimissa, jotka eivät tue display: table
ja display: table-cell
(käytännössä vain Internet Explorer 7). CSS:n avulla simuloimme taulukkokäyttäytymistä (koska taulukot tukevat pystysuoraa tasausta), ja HTML on sama kuin toisessa esimerkissä:
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>
Tässä tekniikassa käytetään absoluuttisesti asemoitua elementtiä, jossa ylä-, ala-, vasen- ja oikeanpuoleinen arvo on 0. Sitä kuvataan tarkemmin Smashing Magazinen artikkelissa Absolute Horizontal And Vertical Centering In CSS.
Voit tehdä tämän helposti lisäämällä seuraavan CSS-koodin:
display: table-cell;
vertical-align: middle;
Tämä tarkoittaa, että CSS-koodisi näyttää lopulta seuraavalta:
#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>
Voit käyttää tätä tekniikkaa yhden tekstirivin (tai yhden merkin) kohdalla:
Sitä voi käyttää, kun #box
:n korkeus ei ole kiinteä, suhteellinen korkeus prosentteina.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Katso live-demo osoitteessa JsBin (helpompi muokata CSS:ää) tai [JsFiddle][2] (helpompi muuttaa tuloskehyksen korkeutta).
Jos haluat sijoittaa sisäisen tekstin HTML:ään, etkä CSS:ään, sinun on kiedottava tekstisisältö ylimääräiseen inline-elementtiin ja muokattava #box::after
vastaamaan sitä. (Ja tietysti content:
-ominaisuus on poistettava.)
Esim,
<div id="box"><span>TextContent</span></div>
.
Tässä tapauksessa #box::after
olisi korvattava #box span
:lla.
Internet Explorer 8:n tueksi sinun on korvattava ::
sanalla :
.