title: How can I center and left align images?
body: <p>I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned. </p>
  
  <p>This is my desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/peMC5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/peMC5.png" alt="example1"></a></p>
  
  <p>However, when I try to do a <code>text-align: center</code> on the container(id: <code>gallery</code>) I am getting the images displayed like this:</p>
  
  <p><a href="https://i.stack.imgur.com/PZGFa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PZGFa.png" alt="example 2"></a> </p>
  
  <p>I tried following suit with a previous stack overflow question: <a href="https://stackoverflow.com/a/31643221/4808091">CSS: Center block, but align contents to the left
  </a> and wrap the images in another div then align it with <code>display: inline-block;</code> and <code>text-align: left;</code> but the images just seem to align left on the entire page:</p>
  
  <p><a href="https://i.stack.imgur.com/xXNnW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xXNnW.png" alt="example 3"></a></p>
  
  <p>What can I do to accomplish my desired output?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div id="gallery"&gt;
       &lt;div id="images"&gt;
          &lt;div class="container"&gt;
              &lt;a href="images/gallery/image1.jpg" data-lightbox="mygallery"&gt;
                  &lt;img src="images/gallery/image1.jpg"&gt;           
              &lt;div class="overlay"&gt;
                  &lt;img src="images/magnify.png"&gt;
              &lt;/div&gt;
                 &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;a href="images/gallery/image2.jpg" data-lightbox="mygallery"&gt;
              &lt;img src="images/gallery/image2.jpg"&gt;
              &lt;div class="overlay"&gt;
                  &lt;img src="images/magnify.png"&gt;
              &lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#gallery{
      text-align: center;
  }
  #images{
      display: inline-block;
      text-align: left;
  }
  img{
      width: 300px;
      cursor: pointer;
  }
  .overlay  {
      position: absolute;
      right: 0;
      left: 0;
      cursor: pointer;
      visibility: hidden;
      color: transparent;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      transition: all ease-in .3s;
  }
  .overlay &gt; img{
      height: 50%;
      width: 50%;
      top: 50%; 
      visibility: hidden;
      left: 50%;
      transform: translate(-50%,-50%);
      position: absolute;   
  }
  .overlay:hover &gt; img{
      visibility: visible; 
  }
  .container {
      position: relative;
      display: inline-block;
      margin: 5px;
  }
  .container:hover .overlay  {
      visibility: visible;
      opacity: .6;
      background: black;
      color: white;   
  }
  </code></pre>