css:在中间垂直对齐文本

Question

我正在尝试将一些文本垂直对齐到中间 ( jsfiddle )

我有只有文本的跨度和有高度设置的跨度(内联 block 元素)

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

试试这个:

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

Demo