如何使用响应式布局将 amp-img 居中

Question

以下代码无效。如果布局是固定的，如果会工作。

<div style="text-align:center;">
    <amp-img style="max-width: 640px;"  width="640" height="480" layout="responsive" src="~/Content/images/foo.JPG" />
</div>

请注意 style="max-width: 640px;" 用于在 window 足够宽时防止此图像填满宽度。

任何提示将不胜感激。

Answer 1

您的图像包裹在 div 中，这是一个好的开始。不确定你的页面是如何设置的，但对 div 应用 0 auto 的边距对我有用。

Here's a pretty good explanation of margin: 0 auto; 以及为什么居中可能有效也可能无效。

div.img-wrapper {
  max-width: 640px;
  margin: 0 auto;
}

<div class="img-wrapper">
  <amp-img src="/img/amp.jpg" width="640" height="200" layout="responsive" alt="AMP"></amp-img>
</div>

如果你想玩一下，你可以测试一下here。

Answer 2

使用@Craig Scott 的方法和想法。当我编写如下用于居中图像的 AMP 图像代码时，我才成功。

<div class="img-wrapper">
<amp-img src="https://jomutech.com/dispJomutechIcon.png height="50" width="250" layout="responsive" alt="Logo">
</amp-img>
</div>

<style amp-custom>
  div.img-wrapper {
    text-align: center;
  }
</style>

如何使用响应式布局将 amp-img 居中

How to center amp-img with responsive layout

amp-html