Div-elementin pystysuora keskitys kaikille CSS-selaimille

Verkkokehityksessä on ratkaisevan tärkeää luoda elementin asettelu oikein. Monet CSS-ominaisuudet, kuten CSS3 Flexible Box, ovat kuitenkin hyödyllisiä web-sivujen ja HTML-elementtien asettelun säätämiseen. Flexible Boxia käytetään web-sivujen ja sovellusten järjestämiseen rekursiivisesti. Tämä Flexbox-tila auttaa luomaan asetteluja monimutkaisille verkkosivuille ja sovelluksille.

Tämä viesti opastaa sinua, kuinka keskittää div-elementti kaikille selaimille, jotka käyttävät CSS:ää pystysuunnassa.

Div-elementin kohdistaminen CSS:n avulla?

Div-elementti voidaan kohdistaa pystysuoraan käyttämällä näyttöominaisuutta ' flex ' yhdessä CSS:n kanssa' kohdista-kohteet ' omaisuutta ja ' perustele-sisältö ” omaisuutta. 'align-items' -ominaisuus kohdistaa elementin pystysuunnassa ja 'justify-content' -ominaisuus tasaa sisällön vaakasuunnassa.

Esimerkki: Kuinka keskittää div-elementti pystysuoraan CSS:n avulla?

HTML-koodiin lisää ensin '

' elementti ja anna sille luokka ' pääsisältö ”. Lisää '

'-tunnisteiden väliin ' ”-elementti seuraavilla määritteillä:

---

---

• ' src ” -attribuuttia käytetään kuvan URL-osoitteen määrittämiseen.
• ' kaikki ”-attribuutti määrittää tekstiä, joka näkyy kuvan tilalla, jos se ei lataudu.
• ' leveys ”-attribuuttia käytetään kuvan leveyden säätämiseen.
• Lisää sitten '

  ” -elementti upottaaksesi kappaleen sivulle.

Tässä on HTML-koodi:

< div luokkaa = 'pääsisältö' >
< img src = '/images/laptop-notepad.jpg' kaikki = 'Kannettava muistilehtiöllä ja kynällä' leveys = '300' >
< s > Kannettava tietokone on myös tunnettu kannettava tietokone kuten kannettava tietokone. s >
div >

CSS:ssä määritämme div:lle useita tyyliominaisuuksia.

Tyyli 'main-content' Class

.main-content {
korkeus: viisikymmentä % ;
taustaväri: #46C2CB;
fonttikoko: 24px;
täyte: 10px;
}

Seuraavat CSS-ominaisuudet on määritelty ' pääsisältö ”luokka:

• ' korkeus ” -ominaisuutta käytetään säätämään
  -säiliön korkeutta.
• ' taustaväri ” määrittää elementin taustavärin.
• ' Fonttikoko ” määrittää elementin kirjasinkoon.
• ' pehmuste ”-ominaisuus asettaa tilaa elementin sisällön ympärille.

Tulosteesta voit havaita, että div-elementin sisältö ei ole keskellä:

Siirrytään eteenpäin CSS-ominaisuuksien käyttämiseksi, jotka auttavat keskittämään '

”elementti pystysuoraan. Lisää nämä ominaisuudet luokkaan ' pääsisältö ', joita käytetään

-elementin käyttämiseen:

näyttö: flex ;
kohdista kohteet: keskellä;

Tässä on kuvaus:

• ' näyttö 'kiinteistö' flex ' käytetään tekemään div-asettelusta joustava sen elementin suhteen.
• ' kohdista-kohteet ' CSS-ominaisuus on asetettu ' keskusta ”, joka kohdistaa div-elementit pystysuoraan.

Lähtö

Olet oppinut keskittämään div-elementin pystysuoraan kaikissa CSS-selaimissa.

Johtopäätös

Keskittääksesi div-elementin pystysuoraan, CSS näyttö ' kiinteistöä käytetään ' flex ”arvoa. Tämä arvo tekee

-säiliöstä joustavan elementteihinsä nähden. Kohdista div-elementti pystysuoraan säätämällä ' kohdista-kohteet '-ominaisuus ja määritä sille ' keskusta ”arvoa. Tämä blogi on osoittanut, kuinka CSS:n avulla keskitetään pystysuoraan div-elementtejä kaikissa selaimissa.