浮动元素居中的实现方式
在css3之前,对自适应内容宽度的浮动元素,实现居中,似乎还是有点难度的。 比如这样的一个场景, 数量不确定的页码,在页面底部水平居中。
假设html结构如下;
<div class="pager">
<ul class="pager-nums">
<li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
</ul>
</div>
<!-- 若不浮动 .page-nums, 则: -->
ul {text-align:center;}
ul li{display: inline-block; padding:2px 5px;}
若ul浮动,则可以用 position:relative; left:50%
,让ul左边居中,然后再返回自身宽度的一半。
/*ul浮动,宽度自适应内部li的总宽度,left:50% 定位到中间;*/
ul {float:left; position:relative; left: 50%;}
/*li相对定位,li都向前偏移ul总宽度的一半 从而实现居中*/
ul li {float:left; position:relative; left:-50%}
若使用css3, 则可以用position:relative; left:50%
让ul左边居中, 然后用 transform: translateX(-50%)
实现返回自身宽度的一半。