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>

DEMO

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规则即可完成此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我知道这个问题很旧，但是在HTML5中有一个很好的解决方案。您可以将它们全部包装在<figure></figure>标记中。代码看起来像这样：

<div id="wrapper">
<figure>

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

</figure>
</div>

和CSS：

#wrapper{
 text-align:center;
}

Answer 5

我刚刚为一个项目做了这个，并通过使用h6标签实现了它，我没有使用其他任何东西：

在html代码中：

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

图像标签之间的空间在图像之间留下垂直间隙。每个img标记中的width参数是可选的，但它会整齐地调整图像的大小以填充页面的宽度。请注意，每个图像必须设置为仅占宽度的50％。（如果您使用3张图像，则为33％。）width参数必须位于alt和src参数之后，否则它将无法正常工作。

在css代码中：

/* h6: set presentation of images */
h6
  {
  font-family: "Franklin Gothic Demi", serif;
  font-size: 1.0em;
  font-weight: normal;
  line-height: 1.25em;
  text-align: center;
  }

文本项设置标题文本的外观，text-align属性将图像和标题文本居中。

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

5 个答案: