Cum să centrați vertical un element div pentru toate browserele folosind CSS

În dezvoltarea web, este esențial să creați în mod corespunzător aspectul elementului. Cu toate acestea, multe proprietăți CSS, cum ar fi CSS3 Flexible Box, sunt utile pentru ajustarea aspectului paginilor web și a elementelor HTML. Flexible Box este folosit pentru a aranja pagini web și aplicații într-o manieră recursivă. Acest mod Flexbox ajută la crearea machetelor pentru pagini web și aplicații complexe.

Această postare vă va ghida despre cum să centrați un element div pentru toate browserele care utilizează CSS pe verticală.

Cum să aliniez elementul div folosind CSS?

Elementul div poate fi aliniat vertical folosind proprietatea de afișare „ contracta ” împreună cu CSS ” alinierea elementelor „proprietate și „ justifica-conținut ” proprietate. Proprietatea „align-items” aliniază elementul pe verticală, iar proprietatea „justify-content” aliniază conținutul pe orizontală.

Exemplu: Cum să centrați vertical un element div cu CSS?

În HTML, mai întâi, adăugați un „

” element și atribuiți-i clasa “ conținut principal ”. Între etichetele „

”, adăugați un „ ” element cu următoarele atribute:

---

---

• „ src ” este utilizat pentru a specifica adresa URL a imaginii.
• „ Tot Atributul ” definește un text care va fi afișat în locul unei imagini dacă nu se încarcă.
• „ lăţime ” este folosit pentru a regla lățimea imaginii.
• Apoi, adăugați „

  ” element pentru a încorpora paragraful în pagină.

Iată codul HTML:

< div clasă = 'conținut principal' >
< img src = „/images/laptop-notepad.jpg” Tot = „Laptop cu notepad și stilou” lăţime = '300' >
< p > Laptop este un computer portabil cunoscut și la fel de un notebook. p >
div >

În CSS, vom specifica mai multe proprietăți de stil pentru div.

Clasa de stil „conținut principal”.

.conținut principal {
înălţime: cincizeci % ;
culoare de fundal: #46C2CB;
dimensiunea fontului: 24px;
umplutură: 10px;
}

Următoarele proprietăți CSS sunt definite în „ conținut principal ” clasa:

• „ înălţime ” este folosită pentru a regla înălțimea containerului
  .
• „ culoare de fundal ” definește culoarea de fundal a elementului.
• „ marimea fontului ” specifică dimensiunea fontului elementului.
• „ căptușeală ” proprietatea stabilește spațiu în jurul conținutului elementului.

Din rezultat, puteți observa că conținutul elementului div nu este în centru:

Să mergem mai departe pentru a aplica proprietățile CSS care ajută la centrarea „

” element pe verticală. Adăugați aceste proprietăți la clasa „ conținut principal ” care sunt folosite pentru a accesa elementul

:

afişa: contracta ;
alinierea elementelor: centru;

Iată descrierea:

• „ afişa „proprietate” contracta ” este folosit pentru a face aspectul div flexibil la elementul său.
• „ alinierea elementelor „ Proprietatea CSS este setată ca „ centru ”, care va alinia vertical elementele div.

Ieșire

Ați învățat cum să centrați un element div pe verticală pentru toate browserele care utilizează CSS.

Concluzie

Pentru a centra vertical un element div, CSS „ afişa ” proprietatea este utilizată cu ” contracta ” valoare. Această valoare face containerul

flexibil la elementele sale. Pentru a alinia vertical elementul div, reglați „ alinierea elementelor ” proprietate și atribuiți-i un „ centru ” valoare. Acest blog v-a arătat cum să utilizați CSS pentru a centra vertical elementele div în toate browserele.