般写内容居中的时候都会使用text-align:center属性，但是内元素一旦float起来的时候，text-align就会失效。
我们只能其他的方法来达到居中的目的
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>float居中的最佳实践</title> <style type="text/css"> *{margin:0; padding:0;} ul{list-style-type:none;} .container{width:600px; padding:5px; border:2px solid #ddd; margin:30px auto; overflow:hidden; text-align:center;} .container h2{font-size:14px; padding:10px 0;} .sl-float-middle{position:relative; left:50%; float:left;} .sl-float-middle-cell{position:relative; float:left; right:50%; height:30px; line-height:30px; margin:0 5px; border:5px solid #f2f2f2;} .sl-float-middle-cell img{height:30px;} </style> </head> <body> <div class="container"> <h2>float居中的最佳实践</h2> <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> </div> </body> </html> |
|
本方案主要是利用父层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%;} |
|
时间： 2024-07-29 08:34:29