html - CSS:将 img 相对于 div 对齐

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 不再 float ，宽度更改为 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;
}