以下代码不起作用。如果布局是固定的,就可以工作。
<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;“用于防止此图像填充宽度。
任何提示都将非常感谢。
发布于 2018-08-12 08:24:59
您将图像包装在一个div
中,这是一个很好的开始。我不确定你的页面是如何设置的,但在div
中应用自动设置为0的边距对我来说很管用。
margin: 0 auto;
的Here's a pretty good explanation,以及为什么它可以或不能用于居中。
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上测试它。
发布于 2019-02-26 01:51:01
使用@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>
https://stackoverflow.com/questions/51804698
复制相似问题