How do you centre all of the images?

Question

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row">
      <div class="column">
        <img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png"  height=100px width=100px>
      </div>
    </div>

I've been trying to centre the CSS image for so long. I've been googling and googling but I can't seem to find the answer.

The first rule of centering is **"Don't use `float`"** – Paulie_D Sep 01 '21 at 18:19 — Paulie_D, Sep 01 '21 at 18:19

score -1 · Answer 1 · answered Sep 01 '21 at 17:38

-1

You need to check some articles about CSS Layouts

Here is example how to align items to the center with Flexbox:

.row {
   display: flex;
   flex-direction: column;
   align-items: center;
}

answered Sep 01 '21 at 17:38

ClockworkOrange

587
5
10

score -1 · Answer 2 · answered Sep 01 '21 at 17:46

-1

As, the width and height of your images are fixed {100px,100px} you can do one simple change and image will center relative to its parent container

img{ margin: 0 auto; }

answered Sep 01 '21 at 17:46

Shivam Goyal

9
1
1

score -1 · Answer 3 · answered Sep 01 '21 at 17:55

.row {
   display: flex;
   justify-content: space-around;
   align-items: center;
  }

<div class="row">
      <div class="column">
        <img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
      </div>
      <div class="column">
        <img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png"  height=100px width=100px>
      </div>
    </div>

How do you centre all of the images?

3 Answers3