How to set AMP image Align Center

馋奶兔 提交于 2019-12-06 07:13:56

问题


How to set in amp page like follow?

<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>

Thank You!


回答1:


For amp you need to use amp-img tag

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>

Please refer : amp-img

You can not use inline and external css in amp

You could use internal css with following syntax

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



回答2:


Borrowing much from @Bachcha Singh's answer, I only succeeded when I did it as shown below after adding a div around the image code and the inline css code just below the image AMP code. This is how I managed to center my image on my AMP page

<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>


来源:https://stackoverflow.com/questions/43486194/how-to-set-amp-image-align-center

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!