Div-elemendi vertikaalne tsentreerimine kõigi CSS-i kasutavate brauserite jaoks

Veebiarenduses on ülioluline luua elemendi paigutus õigesti. Paljud CSS-i atribuudid, näiteks CSS3 Flexible Box, on aga kasulikud veebilehtede ja HTML-i elementide paigutuse kohandamiseks. Flexible Boxi kasutatakse veebilehtede ja rakenduste rekursiivseks korraldamiseks. See Flexboxi režiim aitab luua paigutusi keerukate veebilehtede ja rakenduste jaoks.

See postitus juhendab teid, kuidas tsentreerida div-elementi kõigi CSS-i vertikaalselt kasutavate brauserite jaoks.

Kuidas joondada div elementi CSS-i abil?

Div-elementi saab vertikaalselt joondada, kasutades kuva omadust ' painduv ' koos CSS-iga ' joondada-üksused ' vara ja ' õigustama-sisu ” vara. Atribuut „align-items” joondab elemendi vertikaalselt ja atribuut „justify-content” joondab sisu horisontaalselt.

Näide: kuidas CSS-i abil vertikaalselt tsentreerida div elementi?

HTML-is lisage esmalt '

' element ja määrake sellele klass ' põhisisu ”. '

' siltide vahele lisage ' ” element järgmiste atribuutidega:

---

---

• “ src ” atribuuti kasutatakse pildi URL-i määramiseks.
• “ kõike ” atribuut määrab teksti, mis kuvatakse pildi asemel, kui selle laadimine ebaõnnestub.
• “ laius ” atribuuti kasutatakse pildi laiuse reguleerimiseks.
• Seejärel lisage '

  ” element lõigu lehele manustamiseks.

Siin on HTML-kood:

< div klass = 'põhisisu' >
< img src = '/images/laptop-notepad.jpg' kõike = 'Sülearvuti märkmiku ja pliiatsiga' laius = '300' >
< lk > Sülearvuti on tuntud ka kaasaskantav arvuti nagu sülearvuti. lk >
div >

CSS-is määrame divile mitu stiiliatribuuti.

Stiili 'põhisisu' klass

.põhisisu {
kõrgus: viiskümmend % ;
taustavärv: #46C2CB;
fondi suurus: 24 pikslit;
polster: 10px;
}

Järgmised CSS-i atribuudid on määratletud jaotises ' põhisisu ” klass:

• “ kõrgus ” atribuuti kasutatakse konteineri
  kõrguse reguleerimiseks.
• “ taustavärv ” määrab elemendi taustavärvi.
• “ fondi suurus ” määrab elemendi fondi suuruse.
• “ polsterdus ” atribuut määrab ruumi elemendi sisu ümber.

Väljundist näete, et div elemendi sisu pole keskel:

Liigume edasi, et rakendada CSS-i atribuute, mis aitavad tsentreerida

” element vertikaalselt. Lisage need omadused klassi ' põhisisu ', mida kasutatakse elemendile

juurdepääsuks:

kuva: painduv ;
joonda-elemendid: keskel;

Siin on kirjeldus:

• “ kuva 'vara' painduv ” kasutatakse div-paigutuse muutmiseks selle elemendi suhtes paindlikuks.
• “ joondada-üksused ' CSS-i atribuut on määratud kui ' Keskus ”, mis joondab div-elemendid vertikaalselt.

Väljund

Olete õppinud, kuidas tsentreerida div elementi vertikaalselt kõigi CSS-i kasutavate brauserite jaoks.

Järeldus

Div-elemendi vertikaalseks tsentreerimiseks CSS ' kuva ' vara kasutatakse koos ' painduv ” väärtus. See väärtus muudab konteineri

oma elementide suhtes paindlikuks. Div-elemendi vertikaalseks joondamiseks reguleerige joondada-üksused ' atribuut ja määrake sellele ' Keskus ” väärtus. See ajaveeb on näidanud, kuidas kasutada CSS-i div-elementide vertikaalseks tsentreerimiseks kõigis brauserites.