在不设置DIV宽度的情况下,让它水平居中。

第一种方法:外层设置相对定位且浮动,left:50%,这样左边位置就偏移到了中间的位置;然后内层设置相对定位,left:-50%,这样正好向左偏移自身宽度的一半,实现了居中。
<div class="wrap">
  <div class="inner">html:让inner居中</div>
</div>
.wrap{float:left;/*自适应内容宽度*/position:relative;left:50%;}
.inner{position:relative;left:-50%;}
 
第二种办法:外层使用text-align:center;我们知道text-align:center是让里面的内联元素居中,很显然在外层设置text-align:center后,我们让里面的元素变成内联元素即可,则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)
总结:
外层元素{text-align:center;}
内层元素div{display:inline-block;text-align:left;}
 

 

posted @ 2017-03-27 15:52  Dios  阅读(4182)  评论(0编辑  收藏  举报