在柔性容器中水平居中兩個div

我有兩個div（一個在另一個下面），我希望此列集中對齊。但使用justify-content: center divs沿y軸（垂直）居中排列，但不沿x軸（水平）排列。在柔性容器中水平居中兩個div

我想知道如果唯一的方法（與flexbox）也有沿x軸中心對齊是添加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%; 
}

這裏的jsfiddle：

https://jsfiddle.net/uLah0gqa/

來源

2016-02-15 Borja

當flex-direction是column你可以使用justify-content垂直取向和align-items水平取向。

試試這個：

#sharesocial { 
    align-items: center; 
}

Revised Demo

瞭解更多：

來源

2016-02-15 16:09:04

在柔性容器中水平居中兩個div

回答

相關問題