如何在div类中居中列表(ul li)上的项目

Question

我正在尝试将小图标的水平列表居中。对于熟悉Launchrock的人来说，用户可以自定义所有代码。注意，我看不到它们的任何标准CSS，但我们可以覆盖它们的所有CSS。

<div class="LR-site-connect">
    <ul class="LR-connect-share-links LR-clearfix">
        <li><a href="#" class="LR-connect-icon connect-rss" title="rss"></a></li>
        <li><a href="#" class="LR-connect-icon connect-github" title="github"></a></li>
        <li><a href="#" class="LR-connect-icon connect-pinterest" title="pinterest"></a></li>
        <li><a href="#" class="LR-connect-icon connect-youtube" title="youtube"></a></li>
    </ul>
</div> 

Answer 1

假设你的图标是16px宽，你希望布局为:

[      [ ] [ ] [ ] [ ]      ]

您可以尝试以下操作:

.LR-connect-share-links { width: 94px; margin: 0 auto; overflow: hidden; }
.LR-connect-share-links > li { float: left; width: 16px; margin-right: 10px; }
.LR-connect-share-links > li:last-child { margin-right: 0; }

在需要覆盖的属性中添加一些!important，您应该有一个工作的解决方案。

Answer 2

你可以用它来覆盖任何CSS并将其居中:

margin:0 auto !important;