Bootstrap 3在div中垂直对齐不起作用

Question

I tried the following to vertically align text in a div ( fiddle ):

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>

However, the text remains top-aligned! What am I doing wrong?

_{^{(Note: this is not a duplicate, because the duplicate questions for this issue all recommend the above as the solution: I'm asking why the solution isn't working for me).}}

Answer 1

It is top aligned, but unless you change the height it will look the same as middle or bottom aligned.

What you have now, but with background colors added to the divs:

 <div class="container-fluid"> <div class="row"> <div class="col-xs-2" style="background: #bbb;"> This should not be vertically centered </div> <div class="col-xs-2" style="background: #888; display: table-cell; vertical-align: middle;"> This should be vertically centered </div> </div> </div> 

What you will see if you give each a height of 50 pixels:

 <div class="container-fluid"> <div class="row"> <div class="col-xs-2" style="background: #bbb; height: 50px;"> This should not be vertically centered </div> <div class="col-xs-2" style="background: #888; height: 50px; display: table-cell; vertical-align: middle;"> This should be vertically centered </div> </div> </div>