html body標籤的居中屬性你知道嗎？ html body標籤的定義與使用方法-html教學-PHP中文網

首頁

web前端

html教學

html body標籤的居中屬性你知道嗎？ html body標籤的定義與使用方法

寻∝梦

Aug 20, 2018 pm 02:14 PM

body html

html body標籤的居中屬性你知道嗎？ html body標籤的定義和使用方法。以下這篇文章主要為大家解釋的就是html body標籤的定義和居中屬性的兩種方法，還有關於html body標籤的定義和使用方法介紹

html body標籤的定義和用法：

body 元素定義文件的主體。

body 元素包含文件的所有內容（例如文字、超連結、圖像、表格和清單等等。）

HTML 標籤實例

一個簡單的HTML 文檔，帶有最基本的必需的元素：

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

登入後複製

#html body標籤的居中屬性

html body標籤的居中屬性(一):

基礎居中的使用方法：

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

登入後複製

html body標籤的居中屬性（二）:

#div標籤在body裡水平垂直居中使用方法：

水平居中： div標籤在整個body裡居中的方法用CSS控制即可，body{text-align:center;} .box{margin: 0 auto;} 類別box就是在整個body里水平居中

垂直居中：div在body裡的垂直居中用CSS控制都不是很有效果，所以用js來控制比較管用,程式碼如下（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属性
         }
}

登入後複製

名為box的css類別就垂直居中了

#瀏覽器支援

所有主流瀏覽器都支援標籤。

【相關推薦】

HTML del標籤是區塊級元素嗎？ html del標籤具體應用方法

html hr標籤的屬性有哪些？ HTML hr標籤的樣式詳解

以上是html body標籤的居中屬性你知道嗎？ html body標籤的定義與使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn