Tekstin keskittäminen pystysuunnassa Divissa CSS:n avulla

Kehittyneet CSS-tekniikat pystykeskitykseen

Kolmannessa komentosarjassa käytämme taulukon näyttömenetelmää. Asetus display: table; säiliössä ja display: table-cell; kanssa luodussa pseudoelementissä ::before antaa meille mahdollisuuden käyttää vertical-align: middle; omaisuutta. Tämä menetelmä jäljittelee taulukon solujen käyttäytymistä, mikä mahdollistaa sisällön keskittämisen pystysuoraan. Vaikka tätä lähestymistapaa käytetään harvemmin nykyaikaisessa verkkosuunnittelussa, se voi olla hyödyllinen yhteensopivuuden ylläpitämisessä vanhempien selainten kanssa tai käsiteltäessä vanhaa koodia. Se tarjoaa luotettavan tavan keskittää sisältöä turvautumatta uudempiin asettelujärjestelmiin.

Neljäs komentosarjaesimerkki käyttää line-height omaisuutta. Asettamalla line-height yhtä suuri kuin säilön korkeus, teksti on keskitetty pystysuoraan. Tämä tekniikka on suoraviivainen ja tehokas yksiriviselle tekstille. Se ei kuitenkaan välttämättä sovellu moniriviselle tekstille tai dynaamiselle sisällölle, jossa säilön korkeus voi muuttua. Rajoituksistaan ​​huolimatta line-height menetelmä on nopea ja helppo ratkaisu tekstin pystysuoraan keskittämiseen yksinkertaisissa skenaarioissa.

Flexboxin käyttäminen pystykeskitykseen

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Ruudukon käyttäminen pystysuuntaiseen keskittämiseen

CSS-ruudukko

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Taulukkonäytön käyttäminen pystysuuntaiseen keskittämiseen

CSS-taulukkonäyttö

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Viivan korkeuden käyttäminen pystykeskitykseen

CSS-linjan korkeus

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Yleisiä kysymyksiä vertikaalisesta keskityksestä CSS:ssä

1. Mikä on helpoin tapa keskittää teksti pystysuunnassa div-elementissä?
2. Käyttämällä display: flex; kanssa justify-content: center; ja align-items: center; on usein helpoin ja tehokkain tapa.
3. Kuinka keskität tekstiä pystysuunnassa vanhemmissa selaimissa?
4. Taulukon näyttömenetelmää käyttämällä display: table; ja vertical-align: middle; voi auttaa saavuttamaan pystysuuntaisen keskityksen vanhemmissa selaimissa.
5. Voidaanko CSS-ruudukkoa käyttää tekstin keskittämiseen pystysuunnassa?
6. Kyllä, CSS Grid voi keskittää tekstiä pystysuunnassa käyttämällä display: grid; ja place-items: center;.
7. Onko mahdollista keskittää monirivistä tekstiä pystysuoraan?
8. Kyllä, käyttämällä Flexboxia tai CSS Gridiä voit helposti keskittää monirivisen tekstin pystysuoraan säilöön.
9. Kuinka keskität pystysuunnassa tekstin, jonka säilön korkeus tunnetaan?
10. Voit asettaa line-height ominaisuus vastaamaan säilön korkeutta ja keskittää tekstin tehokkaasti.
11. Entä jos säiliön korkeus on dynaaminen?
12. Käyttämällä Flexboxia, Gridiä tai transform Ominaisuus varmistaa tasaisen pystysuuntaisen keskityksen jopa dynaamisilla säiliökorkeuksilla.
13. Onko käytössä haittoja transform: translateY(-50%);?
14. Vaikka se on tehokasta, se vaatii vanhemmilta position: relative; ja se voi olla hieman monimutkaisempi toteuttaa kuin Flexbox tai Grid.
15. Kuinka keskität tekstin pystysuoraan responsiivisessa suunnittelussa?
16. Flexboxin tai CSS Gridin käyttö on erittäin suositeltavaa responsiivisissa malleissa, koska ne mukautuvat hyvin erilaisiin näyttökokoihin ja -suuntiin.

Viimeisiä ajatuksia pystykeskittämisestä

Tekstin pystykeskittäminen div-osion sisällä voidaan saavuttaa useilla tehokkailla menetelmillä. Nykyaikaiset tekniikat, kuten Flexbox ja Grid, tarjoavat eniten joustavuutta ja helppoutta toteuttaa. Vanhemmat menetelmät, kuten taulukon näyttö ja rivin korkeus, voivat silti olla hyödyllisiä tietyissä tapauksissa. Ymmärtämällä ja soveltamalla näitä erilaisia ​​lähestymistapoja kehittäjät voivat varmistaa, että heidän sisältönsä on visuaalisesti houkutteleva ja oikein kohdistettu eri laitteissa ja selaimissa.