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
}

我意识到-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中垂直对齐之前

1 个答案: