My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle):
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
This content should not be centered vertically.
</div>
<div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
This content should be vertically centered.
</div>
</div>
</div>
Despite implementing the recommended solution, the text still appears aligned to the top. What am I missing or doing wrong in this case?
(Please note that this question is unique as other similar queries suggest the same approach which I have already tried and failed with).