CODEWITHSUNDEEP
amp-html
Hong
Hong

Reputation: 18501

How to center amp-img with responsive layout

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.

Upvotes: 0

Views: 939

Answers (2)

Joseph
Joseph

Reputation: 837

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>

Upvotes: 0

Craig Scott
Craig Scott

Reputation: 902

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.

Upvotes: 4

Related Questions