Comment obtenir l'effet de centrage vertical de Div-connaissance HTML-php.cn

Comment obtenir l'effet de centrage vertical de Div

藏色散人

Libérer： 2018-11-09 15:52:23

original

10473 Les gens l'ont consulté

Cet article vous présente principalement la méthode pour réaliser le centrage vertical de div.

Diverses dispositions centrées de divs dans la conception Web constituent les connaissances et compétences les plus élémentaires que les débutants en HTML/CSS doivent maîtriser. Effet de centrage horizontal divNous vous l'avons présenté dans des articles précédents, et je pense que les amis novices le maîtrisent déjà.

Nous allons maintenant continuer à utiliser des exemples simples pour vous présenter comment mettre en œuvre le centrage vertical du contenu div.

Etude de référence recommandée : "tutoriel html"

code de centrage vertical divL'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div垂直居中</title>
</head>
<body>
<div style="line-height: 500px;height: 500px;width: 500px;  background: red;">
    PHP中文网
</div>
</body>
</html>

Copier après la connexion

L'effet frontal est le suivant :

Comment obtenir leffet de centrage vertical de Div

Comme le montre l'image, le texte du div est centré verticalement. L'attribut principal est line-height. La propriété
line-height définit la distance entre les lignes (la hauteur de la ligne est la direction verticale).

L'attribut line-height affecte la disposition de la zone de ligne. Lorsqu'il est appliqué à un élément de niveau bloc, il définit la distance minimale entre les lignes de base dans cet élément plutôt que la distance maximale.

La différence calculée entre la hauteur de ligne et la taille de police (appelée « espacement des lignes » en CSS) est divisée en deux moitiés et ajoutée en haut et en bas d'une ligne de contenu textuel. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne. La valeur numérique brute spécifie un facteur d'échelle et les éléments descendants héritent de ce facteur d'échelle plutôt que de la valeur calculée.

Si nous changeons la hauteur définie de 500px à 200px, l'effet de rendu est le suivant :

Comment obtenir leffet de centrage vertical de Div

Si nous ne définissons pas la hauteur ici mais définissons la ligne -hauteur : 200px ;, l'effet est le suivant :

Comment obtenir leffet de centrage vertical de Div

À ce moment, nous pouvons mesurer et constater que la hauteur du div avec un fond rouge est de 400px.

La différence entre la hauteur de ligne et la hauteur :

Pour faire simple, la hauteur de ligne signifie la hauteur de ligne, et la hauteur définit la hauteur de l'élément lui-même.

En résumé, lorsque nous voulons obtenir l'effet de centrage vertical du contenu div, nous devons conserver les valeurs line-height et height cohérent.

Cet article concerne la méthode de mise en œuvre du centrage vertical div Il est également très simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!