css - 在 div 中与其他元素垂直对齐

Question

所以我试图垂直对齐 div 父元素内的 span 元素。 Div parent 有两个 child ，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;
}