CSS - 将两个图像并排放在css中

Question

我试图将两个图像并排放置,但由于某种原因,它总是将图像显示在彼此之下.有谁知道我怎么能让他们居中并且彼此相邻？

谢谢!

HTML代码

<a href="mailto:olympiahaacht@hotmail.com">
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>`

CSS代码

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

Answer 1

尝试改变

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

至

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:olympiahaacht@hotmail.com">
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
</div>?

演示.

Answer 2

您不能拥有两个具有相同ID的元素.

除此之外,你将它们定义为块元素,意思是(用外行的术语)它们被迫出现在自己的行上.

相反,尝试这样的事情:

<div class="link"><a href="..."><img src="..."... /></a></div>
<div class="link"><a href="..."><img src="..."... /></a></div>

CSS:

.link {
    width: 50%;
    float: left;
    text-align: center;
}

Answer 3

Flexbox 可以通过周围的 div 上的两个 css 规则来做到这一点。

.social-media{
    display: flex;
    justify-content: center;
}

<div class="social-media">
<a href="mailto:olympiahaacht@hotmail.com">
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
</div>