Vertical alignment does not work in Bootstrap - html

Question

I'm trying to vertically center the menu links of my header, but does not work. I'm using Bootstrap.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 header">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2" style="font-size: 40px;">
<p>Capelli</p>
</div>
<div class="col-xs-3"></div>
<div class="col-xs-6">
<ul class="list-group list-inline">
<li>Vestidos</li>
<li>Meus Pedidos</li>
<li></li>
<li></li>
<li>Login</li>
<li>Cadastro</li>
<li></li>
<li></li>
<li>Carrinho</li>
</ul>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #CFCFCF;
}
.header {
min-height: 3.7em;
color: #FFFFFF;
background-color: #002A43;
font-family: Arial, sans-serif;
font-size: 20px;
}
.vertical {
float: none;
display: inline-block;
vertical-align: middle;
}
When a run the code, nothing happens.
I've tried many things, like use the class directly in row or in col-, but nothing work. I also trie diferent methods to align vertically, but did not work.
P.S.: Sorry for my bad english.

Answer 1

You want to create a nav bar menu?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Capelli</a>
</div>
<div>
<ul class="nav navbar-nav push-right">
<li class="active">Vestidos</li>
<li> etc</li>
<li>etc</li>
<li>etc</li>
</ul>
</div>
</div>
</nav>
in css you shoud define the font-size of X pixels, because you are using relative font-size.
its 3.7em of 10px or 20px. depending the browser the value can change.
html{ font-size: 16px;}
.header{font-size: 1.25em; // 20/16 = 1.25 and you have sure the font size is relative to 16 because you have define html font size to 16px;.