Question

我有一系列社交媒体图标，我希望集中放置在我的网站底部，在一个方框内。

我的代码看起来对我而且我确定我错过了一些东西。

非常感谢任何帮助。

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;
}

Answer 1

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

另外，修复图片标签

<img class="socialicon" <img src=

到

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

并结束标记

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

的Brynn

Answer 2

尝试从float: left移除.socialicon并使用text-align: center至#footerbar

Answer 3

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

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

另外，我修复了<img>标签，因为你的实现有点破碎/凌乱。你不需要像你一样嵌套<img <img ...>，只需要像这样：{/ p>

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

您也没有关闭我添加的<a>代码。

难以将div与社交图标集中在一起

3 个答案: