关于div居中的一点记录

“DIV居中”这个对于界面设计师来说应该是非常简单的了,但对于非界面设计师或者初学者等,还是有点棘手的,这里做一下记录:

首先,需要先知道怎么写html,这里略过,不过可以推荐个站点htmlsource,这个站点有比较全面的教程,有兴趣者可以先去看看;

接下来,就是让DIV居中的方法(为了能看出DIV居中的效果,我设置了宽度和颜色,并写了一点小说明):

1、如果想让id为centerWrapper的div居中,css的写法是这样的:

div#centerWrapper{
background:red;
width:200px;
margin:0 auto;
}

在所有非IE的浏览器上,上面这个就可以居中了,但在IE上就根本没有居中的效果的,为了兼容IE,需要用到text-align,具体写法是这样:

body{
text-align:center;
}

结合上面的css就可以得到DIV居中的效果了.

 

但是,一个网页不可能只有个DIV!如果还有其他元素,就需要考虑是否需要加上float:left了(因为各元素的默认效果就是靠左浮动的)

 

最后再加多个要求:

如果我要在已经居中的DIV内再加多个子DIV,并且让子DIV相对于DIV绝对定位要怎么做呢?假定子DIV的id是absDiv,css的内容如下:

#absDiv{
position:absolute;
top:10px;
left:10px;
}

测试结果是,在chrome和ie上都没有想要的效果,全部都是相对于body绝对定位,要怎么才能相对于父级DIV绝对定位呢?很简单,在父级DIV加上相对定位即可,完整的css如下:

body{
text-align:center;
}
div#centerWrapper{
background:red;
width:200px;
margin:0 auto;
text-align:left;/**默认都是靠左**/
position:relative;/**让子元素可以绝对定位**/
}
#absDiv{
position:absolute;
top:10px;
left:10px;
}

 

最终效果如下:

divxiaoguo

» 转载保留版权:《关于div居中的一点记录》
» 本文链接地址:https://www.xidige.com/421

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

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

标签:

分享到:

扫一扫 在手机阅读、分享本文

上一篇: 下一篇:
评论区0人评论132人参与

电子邮件地址不会被公开。 必填项已用*标注

*

loading

赞助商广告