Html CSS格式浮动元素

在一个div中，有两个元素彼此相邻。如何使它们垂直对齐=中间

例如：

HTML:

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

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

---

要将内容垂直对齐到中间，只需将

行高度

与

高度

相同，如下所示：

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

---

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

.SelectedOption{
    width: 250px;       
}

…为了这个

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

顶部为（50%高度）-（0.5*1米）…或选项框中的30%左右

---

查看这个很棒的博客主题：

您可以在容器中使用

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;
}