Quantcast
Channel: 前端客栈
Viewing all articles
Browse latest Browse all 8

float居中最佳实践

$
0
0

一般写内容居中的时候都会使用text-align:center属性,但是内元素一旦float起来的时候,text-align就会失效。
我们只能其他的方法来达到居中的目的
参看demo
本方案主要是利用父层ul的float:left+left:50%,配合子层li的float:left+right:50%(left:-50%)来达到目的的。
html代码如下:

	<ul class="sl-float-middle">
		<li class="sl-float-middle-cell">宽度一</li>
		<li class="sl-float-middle-cell">宽度二二二</li>
		<li class="sl-float-middle-cell">三</li>
		<li class="sl-float-middle-cell"><img src="IMG_20111114_154154-300x225.jpg" alt="来一张图片" /></li>
	</ul>

css代码如下:

	.sl-float-middle{position:relative; left:50%; float:left;}
	.sl-float-middle-cell{position:relative; float:left; right:50%;}

欢迎大家提出其他实现方案。


Viewing all articles
Browse latest Browse all 8

Latest Images

Trending Articles





Latest Images