我在互联网上搜索了好几个小时，试图找到解决看似简单的事情的方法；将 2 张图像彼此对齐。我使用的两个图像尺寸相同（尽管其中一个尺寸小一些），我将它们居中放置，<center>这样效果很好。现在的问题是，我希望它们彼此相邻对齐，但是，它们却是在彼此之上。我尝试了许多不同的 CSS 样式和许多不同的 Div 类，但它们都不起作用。因此我放弃了，现在我在这里问。谁能帮我解决这个简单的问题。这是我当前用于图像的 HTML 代码：
<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>.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句