CSS Align items next to each other centered

Question

I have the following:

html

<div class="img-container">
    <div class="google">
        <a href="path to app on play store"><img class="google-img"
            src="images/google-play-badge.png"></a>
    </div>

    <div class="apple">
        <a href="path to app on apple store"><img class="apple-img"
            src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a>
    </div>

    <div class="web">
        <a href="www/index.html"><img class="web-img"
            src="images/view-on-web.svg"></a>
    </div>
</div>

css

.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;
}

As you can see, I do a float: left; so that the 3 items line up next to each other. I also try text-align: center;, to try center the items, but it has no effect.

Question

How do I keep the 3 items lined up next to each other, and centered in the page?

Thanks

Possible duplicate of [CSS two divs next to each other](https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other) — Rob, Jun 01 '17 at 14:10

score 2 · Accepted Answer · answered Jun 01 '17 at 13:59

Use display:inline-block; instead of float and you are good to go

.img-container {
  text-align: center;
}

.img-container .apple,
.img-container .google,
.img-container .web {
  display:inline-block;
  padding: 10px;
  padding-left: 20px;
}

.img-container .google {
  padding-top: 4px;
  padding-left: 0px;
  padding-right: 0px;
}

<div class="img-container">
  <div class="google">
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a>
  </div>

  <div class="apple">
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a>
  </div>

  <div class="web">
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a>
  </div>
</div>

Thank you, that works. I have to wait another 12min, then I can mark this as the correct answer. — Richard, Jun 01 '17 at 14:01

score 1 · Answer 2 · answered Jun 01 '17 at 14:06

Another way to do it is to use flex on the parent, then justify-content: center to center the content horizontally. You can then use other flex properties like align-items to align vertically, too.

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container .apple,
.img-container .google,
.img-container .web {
  padding: 10px;
  padding-left: 20px;
}

.img-container .google {
  padding-top: 4px;
  padding-left: 0px;
  padding-right: 0px;
}

<div class="img-container">
  <div class="google">
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a>
  </div>

  <div class="apple">
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a>
  </div>

  <div class="web">
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a>
  </div>
</div>

@Richard you're welcome. flexbox is awesome, gives you a lot of control over how to lay those elements out. If you aren't familiar with it, this is a good resource https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Michael Coker, Jun 01 '17 at 14:25

CSS Align items next to each other centered

2 Answers2