学习 《编写高质量代码--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,带来了一定的副作用。