Centering images in HTML with CSS

Question

My Images are not all centered. They start roughly in the middle and then go off to the right and side leaving a space on the left hand side

I am trying to make all my images centered neatly. I have 3 images in a row but there is a massive gap on the left hand side so the images start roughly in the centre and go of to the right. I want the all the images to be centered correctly. Here is my html code:

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

<div class="row">
  <div class="column">
    <img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China" >
  </div>
  <div class="column">
    <img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China">
  </div>
   <div class="column">
    <img src="https://i.picsum.photos/id/1002/50/50.jpg" alt="Great Wall of China">
  </div>
</div>

text-align:center to column – Temani Afif May 17 '20 at 19:29 — Temani Afif, May 17 '20 at 19:29

score 0 · Answer 1 · answered May 17 '20 at 19:21

.flex-container {
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
    }

    .column {
        /* flex: 33.33%; */
        padding: 5px;
    }

Make from class="row" to class="flex-container"

<div class="flex-container">
<div class="column">

</div>
<div class="column">

</div>
<div class="column">

</div>

Centering images in HTML with CSS

1 Answers1