Kuinka voin keskittää tekstin (vaaka- ja pystysuunnassa) div

Kuinka Voin Keskittaa Tekstin Vaaka Ja Pystysuunnassa Div



Web-sivuja suunnitellessaan kehittäjät voivat lisätä erilaisia ​​osia, kuten kuvia, tekstiä, taulukoita ja muita. Lisäksi teksti voidaan tasata keskelle div:ssä käyttämällä useita CSS-ominaisuuksia. Suosituin tapa tekstin vaakasuoraan keskittämiseen on käyttää ' tekstin tasaus ”-attribuutti. Lisäksi voit käyttää myös ' viivankorkeus ' ja ' pystytasaus ” -attribuutteja tekstin tasaamiseen pystysuunnassa.

Tämä viesti kertoo menetelmän keskittää teksti pystysuunnassa sekä vaakasuunnassa jaon sisällä:







Kuinka keskittää teksti vaakasuunnassa div:n sisällä?

Jos haluat keskittää tekstin vaakasuunnassa div:n sisällä, tutustu annettuun menettelyyn.



Vaihe 1: Tee div-säiliö



Luo aluksi div-säilö ''

”elementtiä. Lisää sitten ' id ”-attribuutti div-alkutunnisteen sisällä. Upota sen jälkeen tekstiä div-tunnisteen väliin:





< div id = 'tasaista sisältö' >
Linuxhint on yksi parhaista sivustoista varten sisällön luomiseen.
div >


Lähtö


Vaihe 2: Käytä div-säilöä tekstin keskittämiseen



Siirry nyt div-säilöön '' id ' attribuutin nimi valitsimella ' # ' ja käytä seuraavia CSS-ominaisuuksia:

#align-content{
leveys: 80 % ;
marginaali: 0 auto;
täyte: 20px;
tausta: #c8edf3;
tekstin tasaus: keskellä;
väri: rgb ( 49 , viisitoista , 240 ) ;
}


Tässä:

    • ' leveys ” -ominaisuutta käytetään kontin leveyden asettamiseen.
    • ' marginaali ” määrittää tyhjän tilan säiliön ulkopuolella.
    • ' pehmuste ” määrittää tilan elementin rajan sisällä.
    • ' tausta ” määrittää taustavärin elementin takapuolelle.
    • ' tekstin tasaus ' -ominaisuutta käytetään asettamaan tekstin tasaus ' keskusta ”.
    • ' väri ” määrittää reunan sisällä olevan tekstin värin.

Voidaan havaita, että olemme onnistuneesti keskittäneet tasatun tekstin vaakasuoraan luodun div:n sisään:

Kuinka keskittää tekstiä pystysuunnassa div:n sisällä?

Keskitä teksti pystysuunnassa div-säilössä noudattamalla annettuja ohjeita.

Vaihe 1: Avaa div Container

Ensinnäkin, käytä luotua div-säilöä.

Vaihe 2: Käytä CSS-ominaisuuksia Keskitä tekstiä pystysuunnassa

Käytä sitten alla lueteltuja CSS-ominaisuuksia keskittääksesi tekstin pystysuunnassa div:ssä:

#align-content{
näyttö: taulukko-solu;
leveys: 300px;
korkeus: 150px;
täyte: 10px;
väri: sininen;
taustaväri: rgb ( 248 , 215 , 166 ) ;
reunus: 3px katkoviiva #f09d03;
pystysuuntaus: keskellä;
}


Yllä olevan koodinpätkän mukaan:

    • Aseta ' näyttö ', joka määrittää elementin näyttökäyttäytymisen muodossa ' pöytäsolu ”, mikä tarkoittaa, että se toimii kuin taulukon solu div-elementissä.
    • ' leveys ”-ominaisuus määrittää elementin leveyden koon.
    • ' korkeus ” määrittää elementin korkeuden.
    • ' pehmuste ” määrittelee tyhjän tilan elementin sisällä.
    • ' väri ” käytetään elementin sisällä olevan tekstin värin asettamiseen.
    • ' taustaväri ” määrittää elementin taustapuolen värin.
    • ' rajaa ”-ominaisuus määrittää elementin rajan.
    • ' pystytasaus ' -ominaisuutta käytetään määritetyn elementin pystysuuntauksen asettamiseen ' keskellä ”.

Lähtö


Olet oppinut täydellisestä menettelystä tekstin keskittämiseksi säilön sisällä molemmilla tavoilla, pysty- ja vaakasuunnassa.

Johtopäätös

Keskittääksesi tekstin pysty- ja vaakasuunnassa div-elementin sisällä, luo ensin div-säiliö

-elementin avulla ja käytä sitä valitsimella. Käytä sitten CSS-ominaisuuksia, joissa ' tekstin tasaus '-ominaisuutta käytetään vaakasuoraan kohdistukseen, ja ' pystytasaus ” määrittää pystysuoran kohdistuksen. Tämä viesti esitteli menetelmiä tekstin keskittämiseksi pysty- ja vaakasuunnassa div-elementin sisällä.