Trying to center img but no common fix works [duplicate] - php

Question

This question already has answers here:
How do I center floated elements?
(12 answers)
Advantages of using display:inline-block vs float:left in CSS
(5 answers)
Closed 4 years ago.
So i wrote this code to be responsive and I wanted each picture horizontally and in smaller screens, it would go vertical. My only issue is that on larger screens I want the imgs to be centered but no code seems to work. I tried some solutions from Stack users but I can only get it to go either completely left or right but not centered.
Thank you for helping.
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
max-width: 200px;
display: block;
margin: 15px auto;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
</div>

Answer 1

It is easiest to use a flexbox. It is responsive by nature and keeps the document flow intact.
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
width: 33.33%;
padding: 5px;
max-width: 200px;
display: block;
margin: 15px auto;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
</div>