一個元素中居中對齊文本在Flex排

Question

我有以下的html：

<div class="toolbar"> 
    <span>My title</span> 
    <a href="#">User Name</a> 
    <a href="#"> 
     <img src="http://image.flaticon.com/icons/png/128/56/56805.png" /> 
    </a> 
</div> 

我用柔性盒使兩個鏈接，右對齊和「我的標題」文本，以填補如下例所示：https://jsfiddle.net/tz472j3o/

我現在需要的是將文本和圖像鏈接垂直放置在工具欄中。我知道我可以用align-items: center來做到這一點，但是這對我來說並不合適，因爲我需要更改鼠標懸停時鏈接的背景顏色，所以我需要鏈接高度來獲取工具欄中的所有垂直空間。

所以，我需要的是一個垂直拉伸以獲取所有可用空間的元素，但是要將其文本垂直居中放置。

Answer 1

製作鏈接display:flex和align-items:center。

.toolbar { 
 
    background-color: lightblue; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 
span { 
 
    flex-grow: 1; 
 
    align-self: center; 
 
} 
 
a { 
 
    margin-left: 5px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
a:hover { 
 
    background-color: white; 
 
} 
 
img { 
 
    width: 20px; 
 
}

<div class="toolbar"> 
 
    <span>My title</span> 
 
    <a href="#">User Name</a> 
 
    <a href="#"> 
 
    <img src="http://image.flaticon.com/icons/png/128/56/56805.png" /> 
 
    </a> 
 
</div>

Answer 2

使用vertical-align:middle在img多數民衆贊成在a：

.toolbar a img 
{ 
    vertical-align:middle; 
}