CODEWITHSUNDEEP
htmlcss
Richard
Richard

Reputation: 8945

CSS Align items next to each other centered

I have the following:

enter image description here

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

Upvotes: 0

Views: 10477

Answers (2)

Michael Coker
Michael Coker

Reputation: 53684

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>

Upvotes: 1

Chiller
Chiller

Reputation: 9738

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>

Upvotes: 2

Related Questions