Kako okomito centrirati div element za sve preglednike koji koriste CSS

U web razvoju ključno je pravilno kreirati izgled elementa. Međutim, mnoga CSS svojstva, kao što je CSS3 Flexible Box, korisna su za prilagodbu izgleda web stranica i HTML elemenata. Flexible Box koristi se za rekurzivno sređivanje web stranica i aplikacija. Ovaj Flexbox način rada pomaže u stvaranju izgleda za složene web stranice i aplikacije.

Ovaj će vas post uputiti kako okomito centrirati div element za sve preglednike koji koriste CSS.

Kako poravnati div element pomoću CSS-a?

Element div može se okomito poravnati upotrebom svojstva prikaza ' savijati ' zajedno sa CSS-om ' align-items ' vlasništvo i ' opravdati-sadržaj ” vlasništvo. Svojstvo “align-items” poravnava element vertikalno, a svojstvo “justify-content” horizontalno poravnava sadržaj.

Primjer: Kako vertikalno centrirati div element pomoću CSS-a?

U HTML-u prvo dodajte '

' element i dodijelite mu klasu ' glavni sadržaj ”. Između oznaka “

” dodajte “ ” element sa sljedećim atributima:

---

---

• “ src ” atribut se koristi za određivanje URL-a slike.
• “ sve ” atribut definira neki tekst koji će se prikazati umjesto slike ako se ne uspije učitati.
• “ širina ” atribut se koristi za podešavanje širine slike.
• Zatim dodajte '

  ” za ugradnju odlomka na stranicu.

Evo HTML koda:

< div razreda = 'glavni sadržaj' >
< img src = '/images/laptop-notepad.jpg' sve = 'Laptop s notesom i olovkom' širina = '300' >
< str > Laptop je također poznato prijenosno računalo kao prijenosno računalo. str >
div >

U CSS-u ćemo navesti nekoliko svojstava stila za div.

Klasa stila “glavni sadržaj”.

.glavni sadržaj {
visina: pedeset % ;
boja pozadine: #46C2CB;
veličina fonta: 24px;
ispuna: 10px;
}

Sljedeća CSS svojstva definirana su u ' glavni sadržaj ” klasa:

• “ visina ” Svojstvo se koristi za podešavanje visine
  spremnika.
• “ boja pozadine ” definira boju pozadine elementa.
• “ veličina fonta ” određuje veličinu fonta elementa.
• “ podstava ” svojstvo postavlja prostor oko sadržaja elementa.

Iz izlaza možete vidjeti da sadržaj elementa div nije u središtu:

Idemo naprijed i primijenimo CSS svojstva koja pomažu centrirati '

” okomito. Dodajte ova svojstva klasi ' glavni sadržaj ” koji se koriste za pristup elementu

:

prikaz: savijati ;
align-items: center;

Evo opisa:

• “ prikaz 'imovina' savijati ” koristi se kako bi izgled diva bio fleksibilan prema svom elementu.
• “ align-items ” CSS svojstvo postavljeno je kao “ centar “, koji će okomito poravnati div elemente.

Izlaz

Naučili ste kako okomito centrirati div element za sve preglednike koji koriste CSS.

Zaključak

Za vertikalno centriranje div elementa, CSS ' prikaz ' Svojstvo se koristi s ' savijati ” vrijednost. Ova vrijednost čini spremnik

fleksibilnim za njegove elemente. Da biste okomito poravnali div element, podesite ' align-items ' svojstvo i dodijelite mu ' centar ” vrijednost. Ovaj blog vam je pokazao kako koristiti CSS za vertikalno centriranje div elemenata u svim preglednicima.