CSS format floated element

Question

I have 2 elements in a div next to each other. How can I make them to be vertical-align=middle?

Example: http://goo.gl/6Hnb4D

HTML:

<div class="selected">
    <span class="SelectedOption">Option 1</span>
    <b class="button">▾</b>
</div>

CSS:

.selected {
    width: 300px;
    height: 50px;
    border: 1px solid black;
}
.SelectedOption{
    width: 250px;       
}
.button{
    display: block;
    float: right;
}

Answer 1

To to align the contents to the middle vertically, just make the line-height the same as height like below:

.selected {
    width: 300px;
    height: 50px;
    border: 1px solid black;
    line-height: 50px;
}

Demo Fiddle

Answer 2

Alternative you can use display:table in your container and display: table-cell with vertical-align: middle in your sub as following:

.selected {
    width: 300px;
    height: 50px;
    border: 1px solid black;
    display:table;
}
.SelectedOption{
    width: 250px;
    display: table-cell;
    vertical-align: middle;
}

fiddle

Answer 3

In CSS 3, change your class from this...

.SelectedOption{
    width: 250px;       
}

...to this...

.SelectedOption{
    position: relative;
    top: 30%;
    transform: translateY(-50%);
    width: 250px;       
}

Top is (50% height) - (.5 * 1em) ...or more-or-less 30% in your option box.

See this terrific blog on the subject: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/