如何使用响应式布局居中amp-img
如何使用响应式布局居中amp-img
提问于 2018-08-12 08:06:27
以下代码不起作用。如果布局是固定的，就可以工作。
<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;“用于防止此图像填充宽度。
任何提示都将非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 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上测试它。
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51804698
复制相关文章
相似问题