Question

我对HTML和CSS比较陌生，我正在尝试格式化网页我想将四个图像对齐到input div。您可以看到页面here，四个社交媒体图标。我希望它们在一行中一个接一个，与它上面的搜索栏对齐。那么就像网页左侧部分的中心一样？

这是4张图片的HTML：

<div class="social-icons group"> 
    <a href="https://www.facebook.com/asbreckenridge" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/facebook-24.jpg"></a>
    <a href="http://twitter.com/{text:Twitter Username}" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/twitter-24.jpg"></a>
    <a href="https://github.com/AndrewSB" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/github-6-24.jpg"></a>
    <a href="mailto:asbreckenridge@me.com?Subject=Contact%From%Blog"><img src="http://www.iconsdb.com/icons/download/gray/new-post-16.jpg"></a>
</div>`

和CSS

body header .social-icons{font-size:20px;float:center;list-style:none;display:block;margin:0 5px 15px;width:24px;}
body header .social-icons a {color:#4f555b;display:block;opacity:0.8;text-decoration:none}

Answer 1

您似乎想要以下内容：

元素.social-icons不再浮动，宽度更改为100%以允许子元素的水平空间。子a个元素已从display:block更改为display:inline-block。

body header .social-icons {
    display: block;
    width: 100%;
    text-align: center;
}

body header .social-icons a {
    color: #4f555b;
    opacity: 0.8;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Answer 2

尝试将它们设置为ul，文本对齐中心：

http://jsfiddle.net/Kiaaanabal/sSXDC/

ul.social-media li {
    display: inline-block;
    text-align: center;
}

您还可以将输入和ul的宽度设置为相同，以便它们匹配。希望这有帮助！

CSS：相对于div对齐img

2 个答案: