如何僅使用Flexbox從容器中居中放置子元素？

我有一個有2個孩子的容器。第一個孩子是一個圖標，第二個是文本。我只想使用Flexbox將左側的圖標和標題中心對齊。如何僅使用Flexbox從容器中居中放置子元素？

的HTML代碼和CSS代碼：

.container { 
 
    display: flex; 
 
    background-color: #7D8F99; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.title { 
 
    display: flex; 
 
    background-color: #9AADB8; 
 
} 
 

 
.icon { 
 
    display: flex; 
 
    background-color: #1AADA9; 
 
}

<div class="container"> 
 
    <span class="icon">icon</span> 
 
    <span class="title">text</span> 
 
</div>

https://jsfiddle.net/eajosjoh/

來源

2017-08-03 Ioan Ungurean

添加margin: 0 auto;到.title就能解決問題

.container { 
 
    display: flex; 
 
    background-color: #7D8F99; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.title { 
 
    display: flex; 
 
    background-color: #9AADB8; 
 
    margin: 0 auto; 
 
} 
 

 
.icon { 
 
    display: flex; 
 
    background-color: #1AADA9; 
 
}

<div class="container"> 
 
    <span class="icon">icon</span> 
 
    <span class="title">text</span> 
 
</div>

來源

2017-08-03 08:16:21

好主意！然而，使用這種方法''.title'稍微偏離了中心。 –

是的，但是是否將元素居中放置到剩餘空間或父元素的中心。 –

的position: absolute和left: 0在.icon組合會做的伎倆。

.container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    background-color: #7D8F99; 
 
    width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
} 
 

 
.title { 
 
    background-color: #9AADB8; 
 
} 
 

 
.icon { 
 
    background-color: #1AADA9; 
 
    position: absolute; 
 
    left: 0; 
 
}

<div class="container"> 
 
    <span class="icon">icon</span> 
 
    <span class="title">text</span> 
 
</div>

或者，如果你想使用只能彎曲，你可以在右側添加一個空的間隔元件。間隔元件將需要具有與.icon元件相同的寬度。說實話，爲佈局而添加一個空元素並不是一個好選擇。所以我會推薦第一種方法。

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background-color: #7D8F99; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.title { 
 
    background-color: #9AADB8; 
 
} 
 

 
.icon { 
 
    background-color: #1AADA9; 
 
    width: 30px; 
 
} 
 

 
.spacer { 
 
    /* width must match icon width */ 
 
    width: 30px; 
 
}

<div class="container"> 
 
    <span class="icon">icon</span> 
 
    <span class="title">text</span> 
 
    <span class="spacer"></span> 
 
</div>

來源

2017-08-03 08:05:44

如何僅使用Flexbox從容器中居中放置子元素？

回答

相關問題