Com centrar verticalment un element div per a tots els navegadors que utilitzen CSS

En el desenvolupament web, és crucial crear correctament el disseny de l'element. Tanmateix, moltes propietats CSS, com ara CSS3 Flexible Box, són útils per ajustar la disposició de les pàgines web i els elements HTML. Flexible Box s'utilitza per organitzar pàgines web i aplicacions de manera recursiva. Aquest mode Flexbox ajuda a crear dissenys per a pàgines web i aplicacions complexes.

Aquesta publicació us guiarà sobre com centrar un element div per a tots els navegadors que utilitzen CSS verticalment.

Com alinear l'element div amb CSS?

L'element div es pot alinear verticalment utilitzant la propietat de visualització ' flexionar ' juntament amb el CSS ' alinear elements 'propietat i' justificar-contingut ' propietat. La propietat 'align-items' alinea l'element verticalment i la propietat 'justify-content' alinea el contingut horitzontalment.

Exemple: Com centrar verticalment un element div amb CSS?

En HTML, primer, afegiu un '

” element i assigneu-li la classe “ contingut principal ”. Entre les etiquetes '

', afegiu un ' ” element amb els següents atributs:

---

---

• “ src ” s'utilitza per especificar l'URL de la imatge.
• “ tot L'atribut defineix algun text que es mostrarà en lloc d'una imatge si no es carrega.
• “ amplada ” s'utilitza per ajustar l'amplada de la imatge.
• A continuació, afegiu el '

  ” element per incrustar el paràgraf a la pàgina.

Aquí teniu el codi HTML:

< div classe = 'contingut principal' >
< img src = '/images/laptop-notepad.jpg' tot = 'Portàtil amb bloc de notes i bolígraf' amplada = '300' >
< pàg > El portàtil és un ordinador portàtil també conegut com un ordinador portàtil. pàg >
div >

En CSS, especificarem diverses propietats d'estil al div.

Classe d'estil 'contingut principal'.

.principal-contingut {
alçada: 50 % ;
color de fons: #46C2CB;
mida del tipus de lletra: 24px;
farciment: 10px;
}

Les propietats CSS següents es defineixen a la contingut principal ” classe:

• “ alçada ” s'utilitza per ajustar l'alçada del contenidor
  .
• “ color de fons ” defineix el color de fons de l'element.
• “ mida de la font ” especifica la mida de lletra de l'element.
• “ farciment La propietat estableix un espai al voltant del contingut de l'element.

A la sortida, podeu observar que el contingut de l'element div no es troba al centre:

Anem endavant per aplicar les propietats CSS que ajuden a centrar el '

” element verticalment. Afegiu aquestes propietats a la classe ' contingut principal ” que s'utilitzen per accedir a l'element

:

visualització: flexionar ;
elements d'alineació: centre;

Aquí teniu la descripció:

• “ visualització ' propietat ' flexionar ” s'utilitza per fer que el disseny div sigui flexible al seu element.
• “ alinear elements ' La propietat CSS s'estableix com a ' centre ”, que alinearà verticalment els elements div.

Sortida

Heu après a centrar un element div verticalment per a tots els navegadors que utilitzen CSS.

Conclusió

Per centrar verticalment un element div, el CSS ' visualització La propietat s'utilitza amb la flexionar ” valor. Aquest valor fa que el contenidor

sigui flexible als seus elements. Per alinear verticalment l'element div, ajusteu el ' alinear elements ' i assigneu-li un ' centre ” valor. Aquest bloc us ha mostrat com utilitzar CSS per centrar verticalment els elements div en tots els navegadors.