<div style="width:100%;">
<div style="margin:0 auto 0 auto;display:inline-block;">
<img src="http://via.placeholder.com/340x172"/>
<img src="http://via.placeholder.com/340x172"/>
<img src="http://via.placeholder.com/340x172"/>
<img src="http://via.placeholder.com/340x172"/>
</div>
</div>
The trick lies within display: inline-block
The image tags can be added in a list UL
elements to avoid worrying about floating anything and it is much more scalable. If so, apply list-style-type:none;
style to the IL
elements.