Span text is at the top instead of middle

0
votes

I have a <div> I'm trying to line up so all the text is vertical-align: middle;

<div 
    class="col-md-6" 
    style="padding-right: 0px; vertical-align: ">
    <select 
        class="DropDownListDark submenu-dropdown" 
        id="SortProperties_SortBy" 
        name="SortProperties.SortBy" onchange="sortList()" 
        style="float: right; vertical-align: middle; ">
        <option value="Title desc">Title (desc)</option>
    </select>
    <span style="float: right; vertical-align: middle; height: 100%; ">Sort by: &nbsp;</span>
</div>

However, the text stays at the top of the <div>.

When I inspect the <span> and look at Computed values I don't see anything that would cause that:

box-sizing: border-box
display: block
float: right
height: 15px
line-height: 15.7143px
text-align: left
vertical-align: middle
width: 44px

The containing <div> has this:

box-sizing: border-box
display: block
float: left
height: 28px
line-height: 15.7143px
min-height: 1px
padding-left: 15px
padding-right: 0px
position: relative
text-align: left
vertical-align: middle
width: 495px

Changing both of them to use display: inline-block; doesn't fix this either. The text, 'Sort by:' is still aligned at the top of the select control.

How can I fix this?

2
css
please try to refine your code - Microsmsm

2 Answers

0
votes

Try display: table-cell on the div instead of display: block.

Also, you can read up on how to use vertical-align here: http://phrogz.net/css/vertical-align/

0
votes

Just try to set line-height of span to the same value as is height of div. So in your case:

line-height: 28px;