一个不确定宽度的区块水平居中

时间:2014-01-29所属栏目: Html+css 来源: 热度:

我们知道,如果要一个区块,最好的办法是设置其width,然后使用margin左右为auto,但是对于一个不确定宽度的区块,我们也想要该怎么办,其实可以设置其display为table,然后设置左右的margin为auto,不过ie6,7不支持;除此之外我们还可以用css3的box-align和box-pack来实现,当然那更不兼容了

.element{
  display: table;
  margin: 0 auto;
}

因为不兼容,我们得想一个兼容的办法啊,那就是直接用table来构造喽

<table class="centered-block">
    <tbody>
        <tr>
            <td>
                <div>我是需要水平居中的东西</div>
            </td>
        </tr>
    </tbody>
</table>
.centered-block{
  margin-left: auto !important;
  margin-right: auto !important;
}

 

 

标签:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)