::在可变高度垂直对齐之前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 在 -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;
}

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

::before vertical alignment in variable height div

html

css

vertical-alignment