Search code examples
htmlcssflexboxcentering

Centering multiple divs

How can I center multiple (3) divs with images in it (all same size)?

Example:

Example

.desc {
  margin-top: 2%;
}

.desc_img {
  float: left;
  font-size: 32px;
}
<div class="container desc">
  <div class="desc_img">
    <i class="fa fa-link fa-5x"></i>
  </div>
  <div class="desc_img">
    <i class="fa fa-cogs fa-5x"></i>
  </div>
  <div class="desc_img">
    <i class="fa fa-share-alt fa-5x"></i>
  </div>
</div>

Actually, they're inline but I don't know how to center them.

Solution

  • Try CSS flexbox:

    .container {
  display: flex;
  justify-content: center; /* align items horizontally (in this case) */
  align-items: center;     /* align items vertically (in this case) */
  border: 2px solid black;
}
.desc_img {
  margin: 5px;
}
    <div class="container desc">
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
</div>

    jsFiddle