::before vertical alignment in variable height div

Question

I've got a dropdown box I'm working with that contains optional text and a pseudo-button (just an image, the whole box is clickable to drop down the contents). HTML for the whole piece looks something like:

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

A little oversimplified, but it demonstrates the setup. Part of the CSS for this is:

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

I realize that vertical-align at -100% is a bit of a cheap trick, but it managed to get the pseudo-button vertically centered (vertical-align: middle did nothing).

This code works really well until the dropdown box is filled by the user, at which point the total height changes and the pseudo-button's vertical alignment is off.

Any suggestions?

Answer 1

Did you try using the following to align vertically:

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

PS: if you do not have a pre-defined width and height, do it like this :

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