title: How to center a group of images in HTML/CSS?
body: <p>I'm making a simple website for a friend and I can't seem to center 5 png images?
  I have them in a div and the images itself are using display: block; and margin: auto; to center which did work earlier using for only 1 picture as you'll see down below.
  My code: </p>
  
  <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> .middleContent{
          width: 100%;
          top: 50px;
          position: relative;
      }
      
      h2{
          font-family: helvetica;
          font-size: 15px;
          text-align: center;
          float: left;
          width: 20%;
          position: relative;
          top: 30px;
      }
      
      .middlePhoto1, .middlePhoto2, .middlePhoto3, .middlePhoto4, .middlePhoto5{
          width: 15%;
          padding-right: 2%;
          padding-left: 2%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mainContent"&gt;
          &lt;img class="topContent" src="img/homepage.jpg"&gt;&lt;/img&gt;
          &lt;div class="middleContent"&gt;
           &lt;img class="middlePhoto1" src="img/icon1.png"&gt;&lt;/img&gt;     
           &lt;img class="middlePhoto2" src="img/icon2.png"&gt;&lt;/img&gt;  
           &lt;img class="middlePhoto3" src="img/icon3.png"&gt;&lt;/img&gt;    
           &lt;img class="middlePhoto4" src="img/icon4.png"&gt;&lt;/img&gt;
           &lt;img class="middlePhoto5" src="img/icon5.png"&gt;&lt;/img&gt;
          &lt;/div&gt;
         &lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>So I edited it a bit and now the images are in the center of the screen but still not centered in the center screen if that made sense. I'm using only 5% padding right and i have like 300px left but still the fifth icon won't fit when it does have plenty of pixel space left???!?!?!?!?!?!?!</p>