How to vertical align bootstrap - html

Question

I have a text inside a col, and i would like to know how can i put this text in the middle of the col.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 ">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>

Answer 1

try this.
In the class row add style="text-align: center"
Then change class="col-xs-2", class="col-xs-7",class="col-xs-3"
to class="col-xs-12"
Perfile

Answer 2

You can use bootstrap class text-center to center your element in the column
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 text-center">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>

Answer 3

Bootstrap. How to align vertically the contents of the menu
I have four solutions. The first of these requires that images were the same height. In three others the images may differ in height.
1. line-height
You can set a property line-height for the text. line-height must be equal to the height of images. It is suitable when the text occupies one line and images have the same height.
.put-in-the-middle {
line-height: 80px; /* = height of the picture.png */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="pull-left"><img src="http://placehold.it/80x80/69c/fff/" alt="Menu"></div>
<div class="pull-right"><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
<div class="put-in-the-middle text-center">Perfile</div>
</div>
</div>
2. table-cell
You can transform blocks in table cells. Then apply vertical-align: middle; to them.
.transform-in-a-table {
display: table;
}
.transform-in-a-table div {
display: table-cell !important;
vertical-align: middle;
}
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row transform-in-a-table">
<div><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></div>
<div class="make-it-wide text-center">Perfile</div>
<div><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
</div>
</div>
3. HTML table
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<table>
<tr>
<td><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></td>
<td class="make-it-wide text-center">Perfile</td>
<td><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></td>
</tr>
</table>
4. inline-block + text-align-last
You can use the idea from vertical-align with Bootstrap 3 with property text-align-last.
.vertical-middle {
text-align-last: justify;
}
.vertical-middle > div,
.vertical-middle > img {
display: inline-block;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vertical-middle">
<img src="http://placehold.it/80x40/c69/fff/" alt="Menu">
<div>Perfile</div>
<img src="http://placehold.it/120x80/9c6/fff/" alt="Menu">
</div>
</div>