Question

我在互联网上搜索了几个小时，试图找到一个看似简单的东西的解决方案;将2个图像彼此相邻对齐。我使用的两个图像都是相同的尺寸尺寸（虽然其中一个稍微小一点），我让它们通过<center>居中，效果很好。现在的问题是，我希望它们彼此相邻，但是，它们相互重叠。我尝试了很多不同的CSS样式，以及许多不同的Div类，但它们都不起作用。因此我放弃了，现在我在这里问。任何人都可以帮我解决这个简单的问题。这是我目前的图像HTML代码：

＆＃13;

<center><img src="resources/redberyl.png" alt="Red Beryl" style="border: #000000 1px solid; width:400px; height:300px;"></center> 
<center><figcaption><font face="Verdana"><b>Red Beryl<br>The Beryliest</b></font></figcaption></center>
<center><img src="resources/nicholas.png" alt="Nicholas" style="border: #000000 1px solid; width:400px; height:300px;"></center>
<center><figcaption><font face="Verdana"><b>Nicholas<br>All his glory</b></font></figcaption></center>

＆＃13;

Answer 1

使用纯HTML，您可以让其中一个居中，并在第二张图片后面结束center标记：

＆＃13;

<center><img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">
<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250"></center>

＆＃13;

您也可以使用margin: auto;代替使用中心：

＆＃13;

img {
    margin: auto;
}

＆＃13;

<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">
<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">

＆＃13;

您知道，margin: auto;只排列它们。在这种情况下，它仍然不会使它们居中。

Answer 2

.align-center {text-align: center; margin: auto;}

<div class="align-center">
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx">
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx">
</div>

使用figcaption你需要稍微修改你的html

figcaption {width: 50%; float: left; text-align: center; margin: auto;}

<figcaption>
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="Red Beryl" style="border: #000000 1px solid; width:400px; height:300px;">
  <font face="Verdana"><b>Red Beryl<br>The Beryliest</b></font>
</figcaption>
<figcaption>
<img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="Nicholas" style="border: #000000 1px solid; width:400px; height:300px;">
  <font face="Verdana"><b>Nicholas<br>All his glory</b></font>
</figcaption>

（HTML）我如何将2个图像彼此相邻排列并以页面为中心？

2 个答案: