title: CSS Align items next to each other centered
body: <p>I have the following:</p>
  
  <p><a href="https://i.stack.imgur.com/T8Vlx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8Vlx.png" alt="enter image description here"></a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="img-container"&gt;
      &lt;div class="google"&gt;
          &lt;a href="path to app on play store"&gt;&lt;img class="google-img"
              src="images/google-play-badge.png"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="apple"&gt;
          &lt;a href="path to app on apple store"&gt;&lt;img class="apple-img"
              src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="web"&gt;
          &lt;a href="www/index.html"&gt;&lt;img class="web-img"
              src="images/view-on-web.svg"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.img-container {
      text-align: center;
  }
  
  .img-container .apple, .img-container .google, .img-container .web {
      float: left;
      padding: 10px;
      padding-left: 20px;
  }
  
  .img-container .google {
      padding-top: 4px;
      padding-left: 0px;
      padding-right: 0px;
  }
  </code></pre>
  
  <p>As you can see, I do a <code>float: left;</code> so that the 3 items line up next to each other. I also try <code>text-align: center;</code>, to try center the items, but it has no effect.</p>
  
  <p><strong>Question</strong></p>
  
  <p>How do I keep the 3 items lined up next to each other, and centered in the page?</p>
  
  <p>Thanks</p>