让不确定宽度的元素水平居中
方法一:
<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 的父层的中间。
relative如果参数是百分制,则是相对于父元素的位置。
方法二:
<style>
.box{ width:800px; height:100px; background: #ccc; border:1px solid #aaa; margin:100px auto; text-align:center;}
.box2{display:inline-block;*display:inline;*zoom:1;}
a{display: block; margin:0 24px; width:116px; height: 50px; background: gold; text-decoration: none; line-height: 50px; text-align: center; float: left;}
</style>
<div class="box">
<div class="box2">
<a href="#">测试文件</a>
<a href="#">测试文件</a>
<a href="#">测试文件</a>
</div>
</div>