css: vertical align text in the middle

Question

I'm trying to align some text vertically to the middle (jsfiddle)

I have spans with text only and spans which have a height set (inline-block elements)

The HTML looks like this:

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

The css:

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

I need to have the text nicely align vertically to the middle of its parent. I tried to put vertical-align: middle on .text but for some reason only the values top and bottom seem to work. Any suggestions ?

Answer 1

Try with this:

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

Demo

Answer 2

Try:

.bar {
    vertical-align: middle;
}

Fiddle here