Kennen Sie das Zentrierungsattribut des HTML-Body-Tags? Definition und Verwendung des HTML-Body-Tags-HTML-Tutorial-php.cn

Kennen Sie das Zentrierungsattribut des HTML-Body-Tags? Definition und Verwendung des HTML-Body-Tags

寻∝梦

Freigeben： 2018-08-20 14:14:17

Original

25440 Leute haben es durchsucht

Kennen Sie das Zentrierungsattribut des HTML-Body-Tags? Die Definition und Verwendung von HTML-Body-Tags. Der folgende Artikel erklärt Ihnen hauptsächlich die Definition des HTML-Body-Tags und die beiden Methoden zum Zentrieren von Attributen sowie eine Einführung in die Definition und Verwendung des HTML-Body-Tags

Die Definition und Verwendung des HTML-Body-Tags Verwendung: Das

body-Element definiert den Textkörper des Dokuments.

Das Body-Element enthält den gesamten Inhalt des Dokuments (z. B. Text, Hyperlinks, Bilder, Tabellen und Listen usw.)

HTML -Tag-Instanz

Ein einfaches HTML-Dokument mit den grundlegendsten erforderlichen Elementen:

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

Nach dem Login kopieren

Das zentrierte Attribut des HTML-Body-Tags

HTML-Body tag Das Zentrierungsattribut (1):

Grundlegende Zentrierungsmethode:

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

Nach dem Login kopieren

Das Zentrierungsattribut des HTML-Body-Tags (2):

So verwenden Sie das div-Tag, um es horizontal und vertikal im Textkörper zu zentrieren:

Horizontale Zentrierung: Die Methode zur Zentrierung des div-Tags im gesamten Textkörper kann mit CSS gesteuert werden, body{text-align: center;} .box{margin: 0 auto;} Die Klassenbox ist im gesamten Körper horizontal zentriert

und vertikal zentriert: Die CSS-Steuerung der vertikalen Zentrierung von Divs im Körper ist nicht sehr effektiv, daher ist es nicht sehr effektiv Es ist effektiver, js zur Steuerung zu verwenden. Der Code lautet wie folgt (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属性
         }
}

Nach dem Login kopieren

Die CSS-Klasse mit dem Namen box ist vertikal zentriert

Browserunterstützung

Alle gängigen Browser unterstützen

[Verwandte Empfehlungen]

Ist das HTML-Del-Tag ein Element auf Blockebene? Spezifische Anwendungsmethode des HTML-Del-Tags

Was sind die Attribute des HTML-HR-Tags? Detaillierte Erläuterung des Stils des HTML-HR-Tags

Das obige ist der detaillierte Inhalt vonKennen Sie das Zentrierungsattribut des HTML-Body-Tags? Definition und Verwendung des HTML-Body-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!