0

The following code does not work. If would work if the layout were fixed.

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

Please note style="max-width: 640px;" used to prevent this image from filling the width when the window is wide enough.

Any tip will be greatly appreciated.

Hong
  • 17,643
  • 21
  • 81
  • 142

2 Answers2

4

You have your image wrapped in a div which is a good start. Not sure specifically how your page is set-up, but applying a margin of 0 auto to the div worked for me.

Here's a pretty good explanation of margin: 0 auto; and why it may or may not work for centering.

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>

You can test it out here if you want to play around with it.

Craig Scott
  • 892
  • 4
  • 14
  • it works. Thanks a lot. I do not need to set max-width for the amp-img with your answer. – Hong Aug 12 '18 at 00:34
0

Using @Craig Scott approach and idea. I only succeeded when I wrote the AMP image code for centering the image as follows.

<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>
Joseph
  • 789
  • 1
  • 9
  • 23