html - 有人能告诉我为什么下面的 CSS 不会将段落和相关的 div 居中吗？

Question

我是 HTML 和 CSS 的新手，我很难弄清楚为什么我的 CSS 不能按照我认为应该的方式设置 HTML 的样式。非常感谢您的帮助。

基本上，我有这个 HTML 标记:

<div id="things">
    <p>A few things I couldn't live without:</p>
    <br><br>
    <div class="icons">
        <a href="http://www.google.ie" target="_blank"><img alt="Google icon" src="images/google.png"/></a>
        <a href="http://www.wikipedia.org" target="_blank"><img alt="Wikipedia icon" src="images/wikipedia.png"/></a>
        <a href="http://www.youtube.com" target="_blank"><img alt="Youtube icon" src="images/youtube.png"/></a>
        <br>
        <a href="http://www.twitter.com" target="_blank"><img alt="Twitter icon" src="images/twitter.png"/></a>
        <a href="http://www.facebook.com" target="_blank"><img alt="Facebook icon" src="images/facebook.png"/></a>
        <a href="http://www.whatsapp.com" target="_blank"><img alt="Whatsapp icon" src="images/whatsapp.png"/></a>
    </div>
</div>

我希望段落和 class="icons" 在它们的 div 中居中。

我有以下 CSS:

#things {
    width:31%;
    float:left;
}   

#things p{
    float:left;
    margin:3.5% auto 0 auto;
    text-align:center;
}

.icons{
    float:left;
    margin:4% auto 0 auto;
}

谁能给点建议？谢谢

Answer 1

Check this fiddle

更新的 CSS

#things {
    width:31%;
    margin:0px auto;
    text-align:center;
}   

#things p{
    margin:3.5% auto 0 auto;
}

.icons{
    display:inline-block;
}