與其他元素垂直對齊

Question

所以我試圖垂直對齊div母體內的span元素。 Div的父母有兩個孩子，div和跨度有問題。

圖片證明什麼，我有什麼，我想

當前標記

<div class="agmtwr_container"> 
    <div class="agmtwr_shape_container"> 
     <span class="agmtwr_shape agmtwr_voted"></span> 
     <span class="agmtwr_shape agmtwr_voted"></span> 
     <span class="agmtwr_shape agmtwr_voted"></span> 
     <span class="agmtwr_shape agmtwr_voted"></span> 
     <span class="agmtwr_shape agmtwr_empty"></span> 
    </div> 
    <span class="agmtwr_vote_count">6 votes</span> 
</div> 

原始CSS

.agmtwr_shape_container {display:inline-block;height:16px;width:80px} 
.agmtwr_shape{padding:0px;margin:0px;display: inline-block; background-size: 100% 100%;width:16px;height: 16px;} 
.agmtwr_empty {background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#D0D0D0" points="10,0 13.1,6.6 20,7.6 15,12.8 16.2,20 10,16.6 3.8,20 5,12.8 0,7.6 6.9,6.6 "/></svg>');} 
.agmtwr_voted {background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#B8000A" points="10,0 13.1,6.6 20,7.6 15,12.8 16.2,20 10,16.6 3.8,20 5,12.8 0,7.6 6.9,6.6 "/></svg>');} 

我曾嘗試一些（任何企圖中心前）建議與行高等東西，但它似乎並不工作=/ 我想避免表相關的解決方案。

Answer 1

您可以使用：

.agmtwr_container span { 
    vertical-align: middle; 
} 

Answer 2

使用垂直對齊：

.agmtwr_container *{ 
    vertical-align:middle; 
} 

Answer 3

嘗試填充底部，

.agmtwr_vote_count 
{ 
    padding-bottom:2px; 
}