Comment centrer verticalement un élément div pour tous les navigateurs utilisant CSS

Dans le développement Web, il est crucial de créer correctement la mise en page de l'élément. Cependant, de nombreuses propriétés CSS, telles que CSS3 Flexible Box, sont utiles pour ajuster la mise en page des pages Web et des éléments HTML. Flexible Box est utilisé pour organiser les pages Web et les applications de manière récursive. Ce mode Flexbox permet de créer des mises en page pour des pages Web et des applications complexes.

Cet article vous guidera sur la façon de centrer un élément div pour tous les navigateurs utilisant CSS verticalement.

Comment aligner l'élément div à l'aide de CSS ?

L'élément div peut être aligné verticalement en utilisant la propriété d'affichage ' fléchir ' avec le CSS ' aligner les éléments « propriété et » justifier-contenu ' biens. La propriété 'align-items' aligne l'élément verticalement, et la propriété 'justify-content' aligne le contenu horizontalement.

Exemple : Comment centrer verticalement un élément div avec CSS ?

En HTML, ajoutez d'abord un '

' élément et attribuez-lui la classe ' contenu principal ”. Entre les balises '

', ajoutez un ' ” élément avec les attributs suivants :

---

---

• ' src ” L'attribut est utilisé pour spécifier l'URL de l'image.
• ' tout ” L'attribut définit du texte qui s'affichera à la place d'une image en cas d'échec du chargement.
• ' largeur ” L'attribut est utilisé pour ajuster la largeur de l'image.
• Ensuite, ajoutez le '

  ” élément pour intégrer le paragraphe à la page.

Voici le code HTML :

< div classer = 'contenu principal' >
< image src = '/images/ordinateur portable-bloc-notes.jpg' tout = 'Ordinateur portable avec bloc-notes et stylo' largeur = '300' >
< p > L'ordinateur portable est un ordinateur portable également connu comme un ordinateur portable. p >
div >

En CSS, nous spécifierons plusieurs propriétés de style à la div.

Classe de style 'contenu principal'

.contenu principal {
la taille: cinquante % ;
Couleur de l'arrière plan: #46C2CB ;
taille de police : 24 px ;
rembourrage : 10px ;
}

Les propriétés CSS suivantes sont définies dans le ' contenu principal ' classer:

• ' la taille ” La propriété est utilisée pour ajuster la hauteur du conteneur
  .
• ' Couleur de l'arrière plan ” définit la couleur de fond de l'élément.
• ' taille de police ” spécifie la taille de la police de l'élément.
• ' rembourrage ” La propriété définit l'espace autour du contenu de l'élément.

À partir de la sortie, vous pouvez observer que le contenu de l'élément div n'est pas au centre :

Avançons pour appliquer les propriétés CSS qui aident à centrer le '

” élément verticalement. Ajoutez ces propriétés à la classe ' contenu principal ” qui sont utilisés pour accéder à l'élément

 :

affichage: fléchir ;
align-items : center ;

Voici le descriptif :

• ' affichage ' biens ' fléchir ” est utilisé pour rendre la mise en page div flexible pour son élément.
• ' aligner les éléments ' La propriété CSS est définie comme ' centre ”, qui alignera verticalement les éléments div.

Sortir

Vous avez appris à centrer verticalement un élément div pour tous les navigateurs utilisant CSS.

Conclusion

Pour centrer verticalement un élément div, le CSS ' affichage ' la propriété est utilisée avec le ' fléchir ' évaluer. Cette valeur rend le conteneur

flexible pour ses éléments. Pour aligner verticalement l'élément div, ajustez le ' aligner les éléments ' propriété et attribuez-lui un ' centre ' évaluer. Ce blog vous a montré comment utiliser CSS pour centrer verticalement les éléments div dans tous les navigateurs.