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

寻∝梦
發布: 2018-08-20 14:14:17
原創
25401 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板