Vertically aligning content in a row, relative to entire row in twitter bootstrap 3

Question

I'm trying to center a icon next to a given text blurb vertically. As a simple example, this is what the structure looks like (http://bootply.com/98109):

<div class="row">
    <div class="col-xs-2 text-center">icon</div>
    <div class="col-xs-10">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

The more complex variation is that I also want to nest two of these rows in a row while still vertically aligning both the icons to the same vertical position.

I've created a (non-working) example of this structure here:

http://bootply.com/98111

Any idea how to achieve this?

Answer 1

check this solution

The trick is using display table and table-cell

.table{
    display: table;
    vertical-align: middle;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;  
    float: none;
}