3

I have two divs (one under the other) and I want this column aligned centrally. But using justify-content: center the divs are aligned centrally along the y-axis (vertically) but not along the x axis (horizontally).

I would like to know if the only way (with flexbox) to also have center-align along the x-axis is to add margin: auto.

<div id="sharesocial">
  <div id="sharecondividi">
    Condividi
  </div>
  <div id="shareicons">
    <a target="blank" href=""><span class="fa fa-twitter-square" id="twitterbt"></span></a>
    <a target="blank" href=""><span class="fa fa-google-plus-square" id="googleplusbt"></span></a>
    <a target="blank" href=""><span class="fa fa-facebook-square" id="facebookbt"></span></a>
  </div>
</div>

CSS

#sharesocial {
 background: #646464 none repeat scroll 0 0;
 border-radius: 10px;
 display: flex;
 flex-direction: column;
 height: 100px;
 justify-content: center;
 width: 174px;
}

#sharecondividi {
 align-self: center;
 color: #fff;
 display: flex;
 text-align: center;
}

#shareicons {
 align-items: center;
 background: #f0f0f0 none repeat scroll 0 0;
 border-radius: 5px;
 display: flex;
 height: 50%;
 justify-content: space-around;
 width: 95%;
}

Here jsfiddle:

https://jsfiddle.net/uLah0gqa/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Borja
  • 3,359
  • 7
  • 33
  • 66

1 Answers1

5

When the flex-direction is column you could use justify-content for vertical alignment and align-items for horizontal alignment.

Try this:

#sharesocial {
    align-items: center;
}

Revised Demo

Learn more:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701