Question

我试图将一些文字垂直对齐到中间（jsfiddle）

我只有文本跨度和跨度高度设置（内联块元素）

HTML看起来像这样：

<div class="parent">
    <span class="text">Bar</span>
    <span class="bar"></span>
    <span class="text">Foo</span>  
</div>

css：

.bar {
    display: inline-block;
    height:100px;
    width: 100px;
    background-color: green;
}

我需要将文本与其父级的中间垂直对齐。我尝试将vertical-align: middle放在.text上，但出于某种原因，只有值top和bottom似乎有效。有什么建议吗？

Answer 1

尝试：

.bar {
    vertical-align: middle;
}

小提琴here

Answer 2

试试这个：

.parent {
    vertical-align: middle;
}
.bar {
    display: inline-block;
    height:100px;
    width: 100px;
    background-color: green;
    vertical-align: middle;
}
.text {
}

Demo

css：在中间垂直对齐文本

2 个答案: