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>
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....