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

Comment obtenir l'effet de centrage du contenu Div

藏色散人

Libérer： 2018-11-09 15:53:14

original

7359 Les gens l'ont consulté

Cet article vous présente principalement l'effet du centrage du contenu div, ce qui signifie que le contenu div est centré vers le haut, le bas, la gauche et la droite.

Je pense que tout le monde connaît très bien l'effet du centrage du contenu div, tel que la barre de navigation commune de notre site Web. Eh bien, dans l'article précédent, je vous ai présenté les méthodes d'implémentation du div centré horizontalement et du div centré verticalement.

Référence d'apprentissage recommandée : "Tutoriel HTML"

Ce qui suit continuera à vous présenter comment obtenir l'effet de centrage div.

Le code pour centrer le contenu div est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px;  background: red;">
    PHP中文网
</div>
</body>
</html>

Copier après la connexion

L'effet frontal est le suivant :

Comment obtenir leffet de centrage du contenu Div

Comme le montre la figure, le contenu du div est centré.

Ici, nous définissons l'attribut line-height pour garantir que le contenu est centré verticalement et définissons l'attribut text-align: center; pour garantir que le contenu div est centré horizontalement.

L'attribut margin: 0 auto; est défini pour que le div puisse être affiché horizontalement et centré dans la page du navigateur. Bien sûr, il n'est pas nécessaire de le définir si margin n'est pas défini, le contenu du div. sera toujours affiché au centre, comme le montre la figure ci-dessous :

Comment obtenir leffet de centrage du contenu Div

Résumé des propriétés associées :

ligne-. La propriété height définit la distance entre les lignes (hauteur de la ligne).

text-align L'attribut spécifie l'alignement horizontal du texte dans l'élément, et center signifie organiser le texte au milieu.

Cet article concerne la méthode de mise en œuvre de Effet de centrage du contenu Div Il est très simple et facile à comprendre. J'espère qu'il sera utile aux amis qui en ont 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!