讓不確定寬度的元素水平居中

方法一：

<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>