Css之关于块级元素水平居中

来源:互联网 发布:s7200cn密码破解软件 编辑:程序博客网 时间:2024/06/03 00:13

第一种方法:块级元素如Div可以使用Margin-Left:Auto和Margin-Right:Auto来实现,但前提是这个块级元素必须是设置了固定宽度的。对于不能确定宽度的块级元素就不能这们做了,但是我们可以用Table这个标签来实现。它的宽度由内部的元素决定(撑开),即使不给它设定固定宽度,对它设置了Margin-Left:Auto和Margin-Right:Auto也能实现水平居中,因此我们可以把想水平居中但又不确定宽度的块级元素放在Table中实现。

 

第二种方法:就是把块级元素的Display设为Inline即改为行内元素,这样通过设置父元素的Text-Align:Center。来实现居中了,但这样做后块级元素就不能设置Width属性了。(img是行内元素所以只需在父元素中加入text-align:center即可)

 

第三种方法:就是把父元素增加Float:Left,同时设置Position:Relative和Left:50%。而子元素设置Position:Relative和Left:-50%来实现水平居中。这样就可以保留块级元素的Display:Block属性。

 

三种方法根据具体情况来选择。


1 0