在div中對齊圖像和文字virticaly

Question

我想創建一個具有30px高度的div，其中有一個圖像和一個跨度，它對齊到同一個通道。

div { 
 
    height: 30px; 
 
    width: 80px; 
 
    outline: 1px solid black; 
 
} 
 
.image { 
 
    height: 16px; 
 
    vertical-align: middle; 
 
} 
 
span { 
 
    vertical-align: middle; 
 
}

<div> 
 
    <img class='image' src="http://s16.postimg.org/uiq5bnwm9/place.png"> 
 
    <span>Places</span> 
 
</div>

Answer 1

垂直居中的元素，可以使用僞::before元件，然後使它inline-block，相同的高度和它的父，並且vertical-align: middle。

div { 
 
    height: 30px; 
 
    width: 80px; 
 
    outline: 1px solid black; 
 
} 
 
div::before { 
 
    display:inline-block; 
 
    content:''; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.image { 
 
    height: 16px; 
 
    vertical-align: middle; 
 
} 
 
span { 
 
    vertical-align: middle; 
 
}

<div> 
 
    <img class='image' src="http://s16.postimg.org/uiq5bnwm9/place.png"> 
 
    <span>Places</span> 
 
</div>