div中与其他元素垂直对齐

Question

所以我试图在div父级内部垂直对齐span元素。 Div父母有两个孩子，div和span有问题。

图片展示我拥有的和我想要的东西

当前加价

<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

使用vertical align：

.agmtwr_container *{
  vertical-align:middle;
}

Answer 3

尝试填充底部，

.agmtwr_vote_count
{
    padding-bottom:2px;
}