title: How do you centre all of the images?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
        &lt;div class="column"&gt;
          &lt;img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px&gt;
        &lt;/div&gt;
        &lt;div class="column"&gt;
          &lt;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&gt;
        &lt;/div&gt;
        &lt;div class="column"&gt;
          &lt;img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px&gt;
        &lt;/div&gt;
        &lt;div class="column"&gt;
          &lt;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&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>