html -::在可变高度 div 的垂直对齐之前

Question

我有一个我正在使用的下拉框，其中包含可选文本和一个伪按钮(只是一个图像，整个框可单击以下拉内容)。整篇文章的 HTML 看起来像这样:

<div class= "btn-group dropdown" datatype = "responses" datadrop = 0>
    <a class = "dropdown-toggle btn" data-toggle = "dropdown">
        <i class = "sort">
            ::before
        </i>
    </a>
</div>

有点过于简单，但它演示了设置。部分 CSS 是:

.dropdown .sort {
    float: right;                //right-aligns the pseudo button
}
.dropdown .sort::before {
    vertical-align: -100%;
    content: "\f0dc";            //pseudo button
}

我意识到 vertical-align at -100% 是一个有点廉价的技巧，但它设法让伪按钮垂直居中(vertical-align: middle 什么也没做)。

在下拉框被用户填充之前，这段代码工作得非常好，此时总高度发生变化并且伪按钮的垂直对齐被关闭。

有什么建议吗？

Answer 1

您是否尝试过使用以下方式垂直对齐:

{
height:40px; /*add your own*/
width:200px; /*add your own*/
position:absolute;
top:0;
bottom:0;
margin:auto;
}

PS:如果您没有预定义的宽度和高度，请这样做:

{
height:auto;
width:auto;
display:table;
position:absolute;
top:0;
bottom:0;
margin:auto;
}