inline-block元素水平居中问题

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

果断用这个。

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>center</title>

     <style>

         .content-wrapper{

             text-align: center;

         }

         .content-wrapper ul li{

             display: inline-block;

             border: 1px black solid;

         }

     </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都弄一行里。。

好，解决方法就是在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元素可以用后端代码进行迭代生成了~

巴特西

inline-block元素水平居中问题

最新文章

热门文章