Html CSS：相对于div的allign img

我对HTML和CSS比较陌生，我正在尝试格式化网页。
我想将四个图像对齐到一个

输入div

。你可以看到这个页面，四个社交媒体图标。我希望它们一排接一排，与上面的搜索栏对齐。那么像网页左边的中间部分吗

以下是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>`

---

似乎您需要以下内容：

元素

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

---

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

---

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

请做一个jsfiddle，我做一个，然后把它编辑成问题。几分钟做一个评论，这样我就能得到通知。你想让它们在输入元素下对齐吗？还是与输入对齐？

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

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