Question

有人可以告诉我这段代码有什么问题吗，为什么图像没有出现在页面的中央？

<a href="https://LandingPageURL.com">   
    <img src="https://cdn.shopify.com/s/files/1/0030/9939/4106/files/Shipping_and_RETURNS-min_1080x.png?v=1527038127" align="middle">
</a>

Answer 1

尝试使用margin: 0 auto将其居中。

img {
    display: block;
    margin: 0 auto;
}

<a href="https://LandingPageURL.com">
  <img 
  src="https://cdn.shopify.com/s/files/1/0030/9939/4106/files/Shipping_and_RETURNS-min_1080x.png?v=1527038127" width="200" align="middle">
</a>

或使用display: flex。

a {
  display: flex;
  justify-content: center;
}

<a href="https://LandingPageURL.com">
  <img src="https://cdn.shopify.com/s/files/1/0030/9939/4106/files/Shipping_and_RETURNS-min_1080x.png?v=1527038127" height="200" align="middle">
</a>

或者如joknawe所说的text-align: center。

Answer 2

除了修复html语法并使用有效的图片网址外，您还需要执行以下操作来居中图片：

<div style="text-align: center;">
   <a href="https://LandingPageURL.com">
      <img src="https://cdn.shopify.com/s/files/1/0030/9939/4106/files/Shipping_and_RETURNS- min_1080x.png?v=1527038127">
   </a>
</div>

为什么此图像不在页面中心？

2 个答案: