29

我试图将两个图像并排居中，但由于某种原因，它总是将图像显示在彼此下方。有谁知道我怎样才能让它们居中并彼此相邻？

谢谢！

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

5 回答 5

74

尝试改变

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

演示。

于 2012-08-05T19:33:32.500 回答
6

您不能有两个具有相同 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;
}
于 2012-08-05T19:33:06.167 回答
5

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>

于 2017-03-30T20:06:49.293 回答
2

我知道这个问题很老，但在 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;
}
于 2020-04-10T02:37:11.707 回答
-2

我刚刚为一个项目做了这个，并通过使用我没有用于其他任何东西的 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 属性使图像和标题文本居中。

于 2014-09-05T08:42:39.317 回答