Kaip vertikaliai centruoti div elementą visoms naršyklėms naudojant CSS

Kuriant internetą, labai svarbu tinkamai sukurti elemento išdėstymą. Tačiau daugelis CSS ypatybių, pvz., CSS3 Flexible Box, yra naudingos koreguojant tinklalapių ir HTML elementų išdėstymą. „Flexible Box“ naudojama tinklalapiams ir programoms tvarkyti rekursyviai. Šis „Flexbox“ režimas padeda sukurti sudėtingų tinklalapių ir programų maketus.

Šiame įraše sužinosite, kaip centruoti div elementą visose naršyklėse, naudojantys CSS vertikaliai.

Kaip suderinti div elementą naudojant CSS?

Div elementą galima išlygiuoti vertikaliai naudojant rodymo savybę ' lankstus 'kartu su CSS' išlyginti elementus “ nuosavybė ir “ pateisinti-turinys ' nuosavybė. Ypatybė „align-items“ lygiuoja elementą vertikaliai, o ypatybė „justify-content“ – horizontaliai.

Pavyzdys: kaip vertikaliai centruoti div elementą naudojant CSS?

HTML pirmiausia pridėkite „

“ elementą ir priskirkite jam klasę “ Pagrindinis turinys “. Tarp žymų „

“ pridėkite „ “ elementas su šiais atributais:

---

---

• “ src “ atributas naudojamas vaizdo URL nurodyti.
• “ viskas “ atributas apibrėžia tam tikrą tekstą, kuris bus rodomas vietoje vaizdo, jei jo nepavyks įkelti.
• “ plotis “ atributas naudojamas vaizdo pločiui reguliuoti.
• Tada pridėkite „

  “ elementą, kad įterptumėte pastraipą į puslapį.

Štai HTML kodas:

< div klasė = 'Pagrindinis turinys' >
< img src = '/images/laptop-notepad.jpg' viskas = 'Nešiojamas kompiuteris su bloknotu ir rašikliu' plotis = '300' >
< p > Nešiojamasis kompiuteris taip pat žinomas kaip nešiojamasis kompiuteris. p >
div >

CSS nurodysime kelias div stiliaus ypatybes.

Stiliaus „pagrindinio turinio“ klasė

.Pagrindinis turinys {
aukštis: penkiasdešimt % ;
fono spalva: #46C2CB;
šrifto dydis: 24 pikseliai;
pamušalas: 10px;
}

Šios CSS savybės yra apibrėžtos „ Pagrindinis turinys ' klasė:

• “ aukščio ypatybė naudojama norint reguliuoti
  konteinerio aukštį.
• “ fono spalva “ apibrėžia elemento fono spalvą.
• “ šrifto dydis “ nurodo elemento šrifto dydį.
• “ kamšalas “ ypatybė nustato erdvę aplink elemento turinį.

Iš išvesties galite pastebėti, kad div elemento turinys nėra centre:

Pradėkime taikyti CSS ypatybes, kurios padeda centruoti „

“ elementas vertikaliai. Pridėkite šias savybes į klasę ' Pagrindinis turinys “, kurie naudojami norint pasiekti

elementą:

ekranas: lankstus ;
lygiuoti elementus: centre;

Štai aprašymas:

• “ ekranas ' nuosavybė ' lankstus “ naudojamas, kad „div“ išdėstymas būtų lankstus jo elementui.
• “ išlyginti elementus CSS nuosavybė nustatyta kaip „ centras “, kuris vertikaliai išlygiuos div elementus.

Išvestis

Sužinojote, kaip centruoti „div“ elementą vertikaliai visose naršyklėse naudojant CSS.

Išvada

Norėdami vertikaliai centruoti div elementą, CSS ' ekranas “ turtas naudojamas su “ lankstus “ vertė. Dėl šios reikšmės konteineris

yra lankstus jo elementams. Norėdami vertikaliai išlygiuoti div elementą, sureguliuokite „ išlyginti elementus “ nuosavybę ir priskirkite jai „ centras “ vertė. Šis tinklaraštis parodė, kaip naudoti CSS vertikaliai centruoti div elementus visose naršyklėse.