inline-block元素水平居中问题

今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下margin:0 auto等方法木有用了。想起来之前看过display：inline-block的文章，

果断用这个。

之前很少用这个属性。。印象里麻烦比较多。。好了不多说了，上代码。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>center</title>
 6     <style>
 7         .content-wrapper{
 8             text-align: center;
 9         }
10 
11         .content-wrapper ul li{
12             display: inline-block;
13             border: 1px black solid;
14         }
15 
16 
17     </style>
18 </head>
19 <body>
20     <div class="content-wrapper">
21         <ul>
22             <li>hello kitty</li>
23             <li>hello kitty</li>
24             <li>hello kitty</li>
25         </ul>
26     </div>
27 </body>
28 </html>

打开页面，乍一看居中了！！

等等，好像有点奇怪，出现了空白

 

一般这个奇奇怪怪的空白都是文本节点元素惹的祸。。换行符哟，不信你把li都弄一行里。。

好，解决方法就是在wrapper中定义font-size:0;对于里面需要定义字体大小的元素再挨个手动定义一遍。。。

然后为了兼容ie6/7需要做点hack处理。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>center</title>
    <style>
        .content-wrapper{
            text-align: center;
            font-size: 0;
        }

        .content-wrapper ul li{
            display: inline-block;
            *display: inline;
            *zoom:1;
            border: 1px black solid;
            font-size: 16px;
        }


    </style>
</head>
<body>
    <div class="content-wrapper">
        <ul>
            <li>hello kitty</li>
            <li>hello kitty</li>
            <li>hello kitty</li>    
        </ul>
    </div>
</body>
</html>

好了，完成了！li元素可以用后端代码进行迭代生成了~

posted @ 2014-08-14 20:26  浪漫小生  阅读(16880)  评论(0)  编辑  收藏  举报