社交媒体图标，不在 div 内居中答案

【问题标题】：Social Media icons, not centering inside of div社交媒体图标，不在 div 内居中
【发布时间】：2013-02-06 01:17:45
【问题描述】：

不知道为什么，但是如果不使用 padding-left:130px，我无法让图标在页面上居中；

这当然不理想，因为当您重新调整浏览器窗口大小时，图标无法正确居中。也许我需要更多的咖啡，但今天早上我可以使用堆垛机的帮助！

HTML

<div id="center2">
    <div id="social_icons">
        <p>
            Thanks for your interest in our blog!
            You can also find us here, as well as subscribe to our newsletter:
        </p>
        <ul>
            <li id="facebook">
                <a href="https://www.facebook.com/pages/Towerdive/497721103607131" title="Like us on Facebook"><img src="img/icon_facebook.png" alt="Facebook"/></a>
            </li>
            <li id="twitter">
                <a href="https://twitter.com/TowerDiveDotNet" title="Follow us on Twitter"><img src="img/icon_twitter.png" alt="Twitter"/></a>
            </li>
            <li id="newsletter">
                <a href="http://eepurl.com/uY5m9" title="Subscribe to our Newsletter"><img src="img/icon_newsletter.png" alt="Newsletter"/></a>
            </li>
        </ul>
    </div>
</div>

CSS

#center2 {
    width: 100%;
}

#social_icons {
    margin: 0 auto;
    width: 400px;
    height: 250px;
    text-align: center;
}

#social_icons p {
    color: #e3cda4;
}

#social_icons ul {
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

#social_icons ul li {
    float: left;
    padding-right: 10px;
}

如果你们需要完整的 HTML 或 CSS，请告诉我！

【问题讨论】：

标签： html css centering

【解决方案1】：

您可以为此使用 display:inline-block。像这样写：

#social_icons ul li {
    display: inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
    padding-right: 10px;
}

【讨论】：

谢谢！就是这样，很快，嘿嘿，在我检查你的答案之前再过一分钟......

【解决方案2】：

您目前使用浮动来水平显示导航列表。由于浮动，您无法在无序列表中间对齐列表项。

另一种技术是使用display: inline-block; 代替float: left;。列表项将水平显示，但也会考虑所有额外的空白。您将获得项目之间的额外边距（如 4px）。现在您可以在 UL 上使用 text-align: center; 将列表项居中。

Chris Coyier 在这篇文章中描述了几种（简单的）锻炼： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】：

也感谢您的提示！