title: Centering multiple images that have their own DIV
body: <p>I'm trying to center a bunch of images horizontally that each have their own DIV tag. I tried to use text align center but that did not work. Other questions suggested using margin auto for the right and the left sides, but that also did not work. I got it to work with one image, but when i begin to add multiple images the align from top to bottom, I need them aligned horizontally.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .container {
    position: relative;
    width: 50%;
  }
  
  .image {
    display: block;
    width: 50%;
    height: auto;
    text-align: center;
  
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
     left: 0;
    right: 0;
    height: 100%;
    width: 50%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
   }
  
  .container:hover .overlay {
   opacity: 0.5;
  }
  
    .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div class="container"&gt;
    &lt;img src="img_avatar.png" alt="Avatar" class="image"&gt;
    &lt;div class="overlay"&gt;
      &lt;div class="text"&gt;text1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;img src="img_avatar.png" alt="Avatar" class="image"&gt;
    &lt;div class="overlay"&gt;
      &lt;div class="text"&gt;text2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;img src="img_avatar.png" alt="Avatar" class="image"&gt;
     &lt;div class="overlay"&gt;
     &lt;div class="text"&gt;text3&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
    &lt;div class="container"&gt;
     &lt;img src="img_avatar.png" alt="Avatar" class="image"&gt;
     &lt;div class="overlay"&gt;
       &lt;div class="text"&gt;text4&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Thank you!</p>