不设置 Div 元素的宽度,让 Div 元素居中
方法1:
<div class="wrap"> <div class="inner">html : 让 inner 居中</div> </div>
.wrap { float: left; /* 自适应内容宽度 */ position: relative; left: 50%; } .inner { position: relative; left: -50%; }
.wrap 使用 float 是为了让 .wrap 的宽度等于 .inner 的宽度
让 .wrap 的左边在父层的中线上, 让.inner 的左边相对 .wrap 向左移动一半, 这样就可以实现 .inner 在.wrap 的父层的中间。
让 .wrap 的左边在父层的中线上, 让.inner 的左边相对 .wrap 向左移动一半, 这样就可以实现 .inner 在.wrap 的父层的中间。
方法2:
.wrap{ text-align:center; } .container{ display:inline-block; text-align:left; }
text-align:center是让里面的内联元素居中,在外层设置text-align:center后,让里面的元素变成内联元素,可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)。