Actualmente estoy usando FontAwesome, y estoy teniendo un tiempo muy difícil centrar los iconos tanto vertical como horizontalmente en su contenedor. He intentado hacerlo a través de posicionamiento y se encontró con problemas bc los tamaños de los iconos eran diferentes. Básicamente tengo la horizontal, y estoy tratando de conseguir la vertical.
<div class='container'>
<div class='row'>
<div class='offset2 span6 loginContainer'>
<div class='row'>
<div class='login-icon'>
<i class='icon-user'></i>
</div>
<input type="text" placeholder="Email" />
</div>
<div class='row'>
<div class='login-icon'><i class=" icon-lock "></i></div>
<input type="password" class="" placeholder="Password" />
</div>
</div>
</div>
</div>
.login-icon{
font-size: 40px;
line-height: 40px;
background-color:black;
color:white;
width: 50px;
height: 50px;
}
.login-icon [class*='icon-']{
height: 50px;
width: 50px;
display: inline-block;
text-align: center;
vertical-align: baseline;
}
Por fin lo he conseguido (
):.centerWrapper:before {
content:'';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.center {
display:inline-block;
vertical-align: middle;
}
<div class='row'>
<div class='login-icon'>
<div class='centerWrapper'>
<div class='center'> <i class='icon-user'></i></div>
</div>
</div>
<input type="text" placeholder="Email" />
</div>