首页 > 代码库 > inline-block元素水平居中问题

inline-block元素水平居中问题

2024-07-17 16:03:17   219人阅读

今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下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元素可以用后端代码进行迭代生成了~


联系
我们