无法将 div 与社交图标居中答案

【问题标题】：Having trouble centering a div with social icons无法将 div 与社交图标居中
【发布时间】：2014-08-25 21:42:43
【问题描述】：

我有一些社交媒体图标，我希望将它们放在我网站底部的一个盒子 div 中。

我的代码看起来不错，但我确定我遗漏了一些东西。

任何帮助将不胜感激。

HTML

<div id="footerBar">
    <div id="icons">
        <a href="https://youtube.com/MYPROFILE"><img class="socialicon" <img         src="images/icons/youtube_dark.png" onmouseover="this.src='images/icons/youtube_red.png'" onmouseout="this.src='images/icons/youtube_dark.png'" alt="Subscribe on YouTube" width="32" height="32">

        <a href="https://twitter.com/MYPROFILE"><img class="socialicon" <img src="images/icons/twitter_dark.png" onmouseover="this.src='images/icons/twitter_blue.png'" onmouseout="this.src='images/icons/twitter_dark.png'" alt="Follow on Twitter" width="32" height="32">

        <a href="https://instagram.com/MYPROFILE"><img class="socialicon" <img src="images/icons/instagram_dark.png" onmouseover="this.src='images/icons/instagram_beige.png'" onmouseout="this.src='images/icons/instagram_dark.png'" alt="Follow on Instagram" width="32" height="32">

        <a href="https://behance.com/MYPROFILE"><img class="socialicon" <img src="images/icons/behance_dark.png" onmouseover="this.src='images/icons/behance_blue.png'" onmouseout="this.src='images/icons/behance_dark.png'" alt="Follow on Behance" width="32" height="32">

        <a href="https://uk.linkedin.com/in/MYPROFILE/"><img class="socialicon" <img src="images/icons/linkedin_dark.png" onmouseover="this.src='images/icons/linkedin_blue.png'" onmouseout="this.src='images/icons/linkedin_dark.png'" alt="Connect on LinkedIn" width="32" height="32">

        <a href="https://vimeo.com/MYPROFILE"><img class="socialicon" <img src="images/icons/vimeo_dark.png" onmouseover="this.src='images/icons/vimeo_blue.png'" onmouseout="this.src='images/icons/vimeo_dark.png'" alt="Subscribe on Vimeo" width="32" height="32">

    <a href="https://dribbble.com/MYPROFILE"><img class="socialicon" <img                      src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src='images/icons/dribbble_dark.png'" alt="Follow on Dribbble" width="32"     height="32">
    </div>
    </div>

CSS

#footerBar
{
padding:5px;
width:75%;
height:50px;
margin:10px auto;
border:1px solid #1e1e1e;
background-color: #f3f3f3;
}

.socialicon 
{
float:left;
width:32px;
height:32px;
margin:auto;
}

.socialicon a
{
float:left;
width:32px;
height:32px;
margin:auto;
vertical-align: middle;
}

【问题讨论】：

您发布的 html 代码至少看起来完全错误。请看一下它并创建一个用于测试的小提琴

标签： html css

【解决方案1】：

http://jsfiddle.net/7U4aE/4/

通过添加#icons { text-align: center; } 和a { display: inline-block; }，它将所有子元素对齐到 div 的中心。如有必要，您可以在每个图标之间添加间距。

另外，我修复了<img> 标签，因为您的实现有点损坏/混乱。你不需要像以前那样嵌套<img <img ...>，只要有一个这样的：

<img class="socialicon" src="..." onmouseover="..." onmouseout="..." alt="Subscribe on YouTube" width="32" height="32" />

您也没有关闭我添加的 <a> 标签。

【讨论】：

非常感谢您在这方面的帮助，非常感谢您和以上所有人的礼貌帮助。

【解决方案2】：

我会尝试从.socialicon 中删除float: left;。

另外，修复图片标签

<img class="socialicon" <img src=

到

<img class="socialicon" src= ...

结束标签

<img class="..." src="..." />

布林

【讨论】：

【解决方案3】：

尝试从.socialicon 中删除float: left 并使用text-align: center 到#footerbar

【讨论】：