html - CSS格式 float 元素

Question

我在一个 div 中有 2 个元素并排放置。我怎样才能使它们垂直对齐=中间？

示例: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

要垂直居中对齐内容，只需将 line-height 设置为与 height 相同，如下所示:

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

Demo Fiddle