如何设置AMP图片居中对齐

Question

如何在amp页面中设置如下？

<p align="center"><img src="img/LOCK1.png" width="40"> <img src="img/lock2.png"  width="40"> <img src="img/LOCK3.png" width="40"></p>

谢谢！

Answer 1

对于放大器，您需要使用 amp-img 标签

AMP HTML files don't support the normal HTML img tag. With amp-img AMP provides a powerful replacement.

<p>
    <amp-img src="img/LOCK1.png"  layout="fixed" width="40" height="40" alt="Lock1"></amp-img>
    <amp-img src="img/lock2.png"  layout="fixed"  width="40" height="40" alt="Lock2"></amp-img>
    <amp-img src="img/LOCK3.png"  layout="fixed" width="40" height="40" alt="Lock3"></amp-img>
</p>

请参考：amp-img

You can not use inline and external css in amp

您可以使用具有以下语法的内部 css

<style amp-custom>
  p {
    text-align: center;
  }
</style>

Answer 2

从@Bachcha Singh 的回答中借鉴了很多，我只有在图像代码周围添加 div 和图像 AMP 代码下方的内联 css 代码后，如下所示才成功.这就是我如何让我的图片在我的 AMP 页面上居中

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

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

如何设置AMP图片居中对齐

How to set AMP image Align Center

amp-html