Center align images horizontally

Question

I would like to center align images horizontally inside the parent div but I just can't make it happen. How can I do that?

So far I have this:

<div style="display:block;margin:auto;width:auto">

  <div style="background-image:url(assets/img/asd.png)"></div>

  <div style="background-image:url(assets/img/abc.png)"></div>

  <div style="background-image:url(assets/img/asd.png)"></div>

  <div style="background-image:url(assets/img/asd.png)"></div>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

you can't. Obviously you are trying to center these images. Just use this instead:

<div style="text-align: center;">
  <div style="display: inline-block;background-image:url(assets/img/asd.png) "></div>
  <div style="display: inline-block;background-image:url(assets/img/abc.png)"></div>
  <div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
  <div style="display: inline-block;background-image:url(assets/img/asd.png)"></div>
</div>

And it would be better to use classes and a stylesheet instead of inline CSS....

Center align images horizontally

Sign up