CSS格式的浮动元素

Question

我在div中彼此相邻有2个元素。 我怎样才能使它们成为vertical-align = middle？

范例： 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;
}

演示小提琴

Answer 2

或者，您可以在容器中使用display:table在其子display:table中使用display:table display: table-cell和vertical-align: middle ：

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

小提琴

Answer 3

在CSS 3中，从此更改您的类...

.SelectedOption{
    width: 250px;       
}

...对此...

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

顶部是（50％高度）-（.5 * 1em）...或者在您的选项框中大约是30％。

请参阅有关此主题的出色博客：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/