开发者社区> 问答> 正文

多行浮动元素居中

css

Html:

<ul class="icon-list clearfix">
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
</ul>

Style:

.icon-list{
    padding: 14px 0;
    li{
        float: left;
        margin: 14px 25px;
        text-align: center;
    }
}

问题:
如何让.icon-list li元素居中对齐即两边填上空白(li的个数不定)?

问题补充:
solar的方法在多行的情况下会表现成这样:
screenshot
我希望它都能居中,用js的方法也可以。

展开
收起
杨冬芳 2016-06-02 15:40:30 1825 0
1 条回答
写回答
取消 提交回答
  • IT从业

    Style:

    .icon-list {
        font-size: 0;
        padding: 14px 0;
        text-align: center;
    
        li {
            font-size: 1rem;
            display: inline-block;
            margin: 14px 25px;
        }
    }

    以上方式存在兼容性问题,但是都是可以解决的,解决方案可以参考 pure 的 grid 的实现方式。目前这种写法基本上所有的主流浏览器,以及手机浏览器里表现都是一致的。

    changes:
    
    .icon-list {
        display: inline-block;
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    
    .container { // ul的包含容器
        text-align: center;
    }
    2019-07-17 19:25:04
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载