Trying to center img but no common fix works

Question

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>

the first rule to center: don't use float – Temani Afif Sep 29 '18 at 18:49 — Temani Afif, Sep 29 '18 at 18:49

score 0 · Accepted Answer · answered Sep 29 '18 at 18:51

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>

Trying to center img but no common fix works

1 Answers1