三、水平居中问题

学习 《编写高质量代码--Web前端开发修炼之道》

不确定宽度的块级元素的水平居中方法一

<style>
ul{list-style:none; margin:0; padding:0;}
.wrap{ background:#000; width:500px; height:100px;}
.test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#316ac5; color:#fff; border:1px solid #316ac5; text-decoration:none;}
.test a:hover{ background:#fff; color:#316ac5;}
</style>
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

注：这个方法演示了有一个分页，三个分页和五个分页的情况下，分页模块都能居中的示例。ul标签是整个分页模块的根元素，它包含的里数量不确定，所以ul本事的宽度也不确定。所以不能用margin-left:auto和margin-right:auto来实现居中。这里用到了一个有趣的标签table来实现不确定宽度的块级元素的水平居中，table有趣的地方在于他本身并不是块级元素，如果不给它设定宽度，他的宽度有内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中！将ul包含在table标签内，就可以间接使ul实现水平居中。

不确定宽度的块级元素的水平居中方法二

<style>
ul{list-style:none; margin:0; padding:0;}
table{ margin-left:auto; margin-right:auto;}
.test li{ float:left; display:inline; margin-right:5px;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#316ac5; color:#fff; border:1px solid #316ac5; text-decoration:none;}
.test a:hover{ background:#fff; color:#316ac5;}
</style>
<div>
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li><a href="#">1</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

注：改变块级元素的display为inline类型，然后使用text-align:center来实现居中。相较于方法一，它的好处是不用增加无语义标签，缺点是它将块级元素的display类型改为inline，变成了行内元素，而行内元素比块级元素少了一些功能，比如设置长宽值等。

不确定宽度的块级元素的水平居中方法三

<style>
ul{list-style:none; margin:0; padding:0;}
.wrap{ background:#000; width:500px; height:100px;}
.test{ text-align:center; padding:5px;}
.test li{display:inline;}
.test a{ padding:2px 6px;background:#316ac5; color:#fff; border:1px solid #316ac5; text-decoration:none;}
.test a:hover{ background:#fff; color:#316ac5;}
</style>
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

注：方法三通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。缺点设置了position:relatie，带来了一定的副作用。