html - 社交媒体图标,不在 div 内部居中

标签 html css centering

不知道为什么,但如果不使用 padding-left:130px,我就无法让图标居中显示;

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

http://towerdive.net/

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,请告诉我!

最佳答案

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

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

关于html - 社交媒体图标,不在 div 内部居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14712899/

相关文章:

WPF MVVM如何在 View 更改后重新居中应用程序窗口?

javascript - 将 'Drop-Zone' 与 'regular file-input' 组合

asp.net - div 分层无法正常工作 : CSS

html - 交响乐 : Overload helpers?

html - 从 URL 根之上扩展的相对路径提供 CSS?

css - 仅为特定 div 内的元素设置样式

css - 在这种特定情况下如何将文本居中放置在 div 中?

php - 我怎样才能让这个得到 echo

html - 在WordPress子主题中覆盖父CSS的媒体查询

php - Wordpress:使用不同的循环