Kā vertikāli centrēt div elementu visām pārlūkprogrammām, izmantojot CSS

Tīmekļa izstrādē ir ļoti svarīgi pareizi izveidot elementa izkārtojumu. Tomēr daudzi CSS rekvizīti, piemēram, CSS3 Flexible Box, ir noderīgi, lai pielāgotu tīmekļa lapu un HTML elementu izkārtojumu. Flexible Box tiek izmantots, lai sakārtotu tīmekļa lapas un lietojumprogrammas rekursīvā veidā. Šis Flexbox režīms palīdz izveidot izkārtojumus sarežģītām tīmekļa lapām un lietojumprogrammām.

Šī ziņa jums palīdzēs, kā centrēt div elementu visās pārlūkprogrammās, kas izmanto CSS vertikāli.

Kā izlīdzināt div elementu, izmantojot CSS?

Div elementu var vertikāli izlīdzināt, izmantojot displeja rekvizītu ' flex 'kopā ar CSS' izlīdzināt vienumus 'īpašums un ' attaisnot-saturs ” īpašums. Rekvizīts “align-items” izlīdzina elementu vertikāli, un rekvizīts “justify-content” līdzinās saturu horizontāli.

Piemērs: kā vertikāli centrēt div elementu, izmantojot CSS?

HTML kodā vispirms pievienojiet “

' elementu un piešķiriet tam klasi ' galvenais saturs ”. Starp tagiem “

” pievienojiet “ ” elements ar šādiem atribūtiem:

---

---

• ' src ” tiek izmantots, lai norādītu attēla URL.
• ' viss ” atribūts definē tekstu, kas tiks parādīts attēla vietā, ja to neizdosies ielādēt.
• ' platums ” atribūts tiek izmantots, lai pielāgotu attēla platumu.
• Pēc tam pievienojiet '

  ” elementu, lai iegultu rindkopu lapā.

Šeit ir HTML kods:

< div klasē = 'galvenais saturs' >
< img src = '/images/laptop-notepad.jpg' viss = 'Klēpjdators ar bloknotu un pildspalvu' platums = '300' >
< lpp > Klēpjdators ir arī pazīstams portatīvais dators kā piezīmjdators. lpp >
div >

CSS mēs norādīsim vairākus stila rekvizītus div.

Stila “galvenā satura” klase

.galvenais saturs {
augstums: piecdesmit % ;
fona krāsa: #46C2CB;
fonta izmērs: 24 pikseļi;
polsterējums: 10 pikseļi;
}

Tālāk norādītie CSS rekvizīti ir definēti “ galvenais saturs ” klase:

• ' augstums ” rekvizīts tiek izmantots, lai pielāgotu konteinera
  augstumu.
• ' fona krāsa ” nosaka elementa fona krāsu.
• ' fonta izmērs ” norāda elementa fonta lielumu.
• ' polsterējums ” rekvizīts nosaka vietu ap elementa saturu.

No izvades var novērot, ka div elementa saturs neatrodas centrā:

Turpināsim lietot CSS rekvizītus, kas palīdz centrēt “

” elements vertikāli. Pievienojiet šos rekvizītus klasei ' galvenais saturs ”, kas tiek izmantoti, lai piekļūtu elementam

:

displejs: flex ;
izlīdzināt vienumus: centrs;

Šeit ir apraksts:

• ' displejs 'īpašums' flex ” tiek izmantots, lai div izkārtojumu padarītu elastīgu tā elementam.
• ' izlīdzināt vienumus ' CSS rekvizīts ir iestatīts kā ' centrs ”, kas vertikāli izlīdzinās div elementus.

Izvade

Jūs esat iemācījies centrēt div elementu vertikāli visās pārlūkprogrammās, kas izmanto CSS.

Secinājums

Lai vertikāli centrētu div elementu, CSS ' displejs 'īpašums tiek izmantots ar ' flex ” vērtību. Šī vērtība padara konteineru

elastīgu tā elementiem. Lai vertikāli izlīdzinātu div elementu, pielāgojiet “ izlīdzināt vienumus ' īpašumu un piešķiriet tam ' centrs ” vērtību. Šajā emuārā ir parādīts, kā izmantot CSS, lai vertikāli centrētu div elementus visās pārlūkprogrammās.