Question

我在div中有2个元素彼此相邻。如何让它们成为vertical-align = middle？

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

Answer 2

备选方案，您可以在容器中使用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;
}

fiddle

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/

CSS格式浮动元素

3 个答案: