Connaissez-vous l'attribut de centrage de la balise html body ? Définition et utilisation de la balise body html-tutoriel HTML-php.cn

Connaissez-vous l'attribut de centrage de la balise html body ? Définition et utilisation de la balise body html

寻∝梦

Libérer： 2018-08-20 14:14:17

original

25438 Les gens l'ont consulté

Connaissez-vous l'attribut de centrage de la balise html body ? La définition et l'utilisation de la balise body HTML. L'article suivant vous explique principalement la définition de la balise html body et les deux méthodes de centrage des attributs, ainsi qu'une introduction à la définition et à l'utilisation de la balise html body

La définition et l'utilisation de la balise html body Utilisation : L'élément

body définit le corps du document.

L'élément body contient tout le contenu du document (tel que le texte, les hyperliens, les images, les tableaux et les listes, etc.)

Instance de balise HTML >

Un document HTML simple avec les éléments requis les plus basiques :

<html>
<head>
  <title>文档的标题</title>
</head>
<body>
  文档的内容... ...
</body>
</html>

Copier après la connexion

attribut central html de la balise body

html Attribut de centrage de la balise body (1) :

Méthode de centrage de base :

<html>
<head>
<title>居中</title>
</head>
<body style="text-align:center;">
<h2>居中</h2>
</body>
</html>

Copier après la connexion

html Attribut de centrage de la balise body (2) :

Comment centrer la balise div horizontalement et verticalement dans le corps :

Centrage horizontal : La méthode de centrage de la balise div dans tout le corps peut être contrôlée avec CSS, body{text-align:center; }. box{margin: 0 auto;} La classe box est centrée horizontalement dans tout le corps

centrée verticalement : le contrôle CSS du centrage vertical des divs dans le corps n'est pas très efficace, il est donc plus efficace. pour utiliser js pour le contrôler. Le code est le suivant (jQuery) :

function SetPostion(){
        var wheight = $(window).height();    //浏览器的高度
        var boxheight = $(“.box”).height();     //box的高度
         //浏览器的高度若大于box的高度，才设置box垂直居中
       if(wheight > boxheight){            
             var h = (wheight -boxheight)/2;         //计算box距顶端的距离
            $(“.box”).css(“margin-top” ,h+”px”)   //设置box的margin-top属性
         }
}

Copier après la connexion

La classe CSS nommée box est centrée verticalement

Support du navigateur

Tous les principaux navigateurs prennent tous en charge la balise

[Recommandations associées]

La balise HTML del est-elle un élément de niveau bloc ? Méthode d'application spécifique de la balise html del

Quels sont les attributs de la balise html hr ? Explication détaillée du style de la balise HTML hr

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!