6 CSS-temppua sisällön kohdistamiseksi pystysuoraan

Puhutaanpa vertikaalisesta kohdistuksesta CSS: ssä tai tarkemmin, miten se ei ole mahdollista. CSS ei ole vielä antanut virallista tapaa keskittää sisältöä vertikaalisesti säiliönsä sisällä. Ongelmana on todennäköisesti turhautunut web-kehittäjät kaikkialla. Mutta ei pelkää, tässä virassa, me aiomme ajaa muutamia temppuja, jotka voivat auttaa sinua jäljitellä vaikutusta.

Näillä tempuilla voi kuitenkin olla rajoituksia, ja saatat joutua käyttää useampaa kuin yhtä temppua loppuun illuusion. Jos tiedät mitä tahansa muuta temppua, kerro meille kommenteistamme.

1. Käytä absoluuttista paikannusta

Ensimmäinen temppu, jota näemme täällä, käyttää asento omaisuutta. Sinulla on kaksi

, yksi on säiliö, toinen lapsielementti, joka sisältää sisällön.

Asennamme ensin säiliöelementin sijainnin suhteeseen, sitten asetamme lapsielementin sijainnin absoluuttinen. Näin voimme sijoittaa sen vapaasti säiliön yli.

Kohdista se pystysuunnassa siirtämällä lapsielementin yläosaa, puolet säiliön korkeudesta, ja vedä se ylös puolet lasten elementin leveydestä. Tässä on tuotos:

Tämä temppu on täydellinen, kun on vain yksi lapsielementti, muuten absoluuttinen asema vaikuttaa saman säiliön toiseen elementtiin.

2. Käytä CSS3-muunnosta

CSS3-muunnos on helpottanut sisällön asettamista keskustaan. CSS3 Transform, toisin kuin asento ei vaikuta muiden samassa säiliössä olevien elementtien asemaan.

Olettaen, että meillä on sama HTML-rakenne kuin edellisellä menetelmällä - yksi vanhempi, yksi lapsielementti - 50% ylhäältä ja CSS-muunnoksen avulla saadaan käännös -50%. Ja siellä on se.

Muista kuitenkin, että CSS3-muunnokset eivät toimi Internet Explorer 8: ssa tai sen alapuolella. Saatat haluta käyttää mitä tahansa muita menetelmiä tässä.

3. Käytä Paddingia

Voimme myös käyttää täyte luoda pystysuoran linjauksen illuusio. Jos haluat tehdä tämän, aseta ylä- ja alareunat tasaisesti seuraavasti:

Tämä temppu soveltuu, kun et aseta säiliötä kiinteälle leveydelle, aseta vain leveys auto.

4. Käytä linjan korkeutta

Jos säiliössä on vain yksi rivi tekstisisältöä, voit kohdistaa tekstin pystysuoraan käyttämällä viivankorkeus omaisuutta. Aseta viivankorkeus arvo on sama kuin säiliön korkeus, ja näet seuraavan lähdön.

Muista, että tämä temppu toimii vain yhdessä rivissä. Jos sisältö hajoaa kahteen tai useampaan riviin, kunkin rivin välinen tila olisi sellainen, kuin määritimme viivankorkeus, antaa meille liikaa välilyöntiä.

5. Käytä CSS-taulukkoa

Henkilökohtaisesti CSS-taulukon käyttäminen on minun suosikki temppu vertikaalisen kohdistuksen soveltamisessa. Se toimii vanhoissa selaimissa, kuten Internet Explorer 8. Tämä menetelmä suoritetaan asettamalla säiliöelementin näyttö pöytä, kun lapsielementti tulee näkyviin taulukko-solu käytä sitten vertical-align ominaisuus keskittää tekstin pystysuoraan.

6. Käytä Flexboxia

Viimeinen vertikaalisen keskittämisen menetelmä on Flexboxin käyttäminen. Flexbox on uusi moduuli CSS3: ssa. Se tarjoaa yksinkertaisemman menetelmän sisällön kohdistamiseksi. Voit keskittää sisällön pystysuunnassa flex-ruutuun yksinkertaisesti lisäämällä kohdistuskohteet: keskus; seuraavasti, ja se on niin.

Muista, että jotkin selaimet tukevat vain Flexbox-moduulin osittaista ominaisuutta, kuten Internet Explorer 10, Safari, 6 ja Chrome 27 ja sen alapuolella. Näin ollen, kuten CSS3-muunnoksen kanssa tehtyyn temppuun, varmista, että vaikutus vaikuttaa hienosti näissä selaimissa.