html body标签的居中属性你知道吗?html body标签的定义和使用方法


当前第2页 返回上一页

div标签在body里水平垂直居中使用方法:

水平居中: div标签在整个body里居中的方法用CSS控制即可,body{text-align:center;} .box{margin: 0 auto;} 类box就是在整个body里水平居中

垂直居中:div在body里的垂直居中用CSS控制都不是很有效果,所以用js来控制比较管用,代码如下(jQuery):

1

2

3

4

5

6

7

8

9

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类就垂直居中了

浏览器支持

所有主流浏览器都支持 <body> 标签。

【相关推荐】

HTML del标签是块级元素吗?html del标签具体应用方法

html hr标签的属性有哪些?HTML hr标签的样式详解

以上就是html body标签的居中属性你知道吗?html body标签的定义和使用方法的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html如何设置底部边框

js的dom是什么?

html问号后的值怎么获取

html如何给table表单加边框

html基础:文档与网站架构

html的输入框需要怎么优化

你必须知道的10个chrome开发工具和技巧

html如何合并表格

html图片不滚动怎么设置

html网址跳转代码是什么

更多相关阅读请进入《body》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...