inline-block元素水平居中問題

本文轉載自查看原文 2014-08-14 20:26 14257 HTML

今天做項目的時候碰到了不固定元素個數，需要水平居中的問題，原來的確定寬度下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元素可以用后端代碼進行迭代生成了~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 inline-block和block元素水平居中顯示 css inline-block 水平居中使用 inline-block 水平垂直居中任意內容解決關於inline-block元素換行問題並列 inline-block 元素互相影響問題 inline-block 實現元素垂直居中 inline-block元素vertical-align的問題分析 Css-淺談如何將多個inline或inline-block元素垂直居中 inline-block元素間距問題的幾種解決方案常見的inline元素、block元素、inline-block元素