css - inside - Centrado de iconos de FontAwesome vertical y horizontalmente

vertical align icon bootstrap

Question

Actualmente estoy usando FontAwesome, y estoy teniendo dificultades para centrar los iconos tanto vertical como horizontalmente en su contenedor. Intenté hacerlo a través del posicionamiento y encontré problemas porque los tamaños de los iconos eran diferentes. Básicamente tengo la horizontal, y estoy tratando de obtener 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;
}

http://jsfiddle.net/ncapito/e2UPC/

Answer 1

Acabo de bajar la altura a 28px en .login-icon [class * = ''icon-''] Aquí está el violín: http://jsfiddle.net/mZHg7/

.login-icon [class*=''icon-'']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}

Answer 2

Así que finalmente lo conseguí ( http://jsfiddle.net/ncapito/eYtU5/ ):

.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>

Answer 3

Esto es todo lo que necesita, sin envoltorio necesario:

.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

http://jsfiddle.net/e2UPC/6/

Answer 4

He utilizado la transformación para corregir el desplazamiento. Funciona muy bien con iconos redondos como el anillo de la vida.

<span class="fa fa-life-ring"></span>

.fa {
    transform: translateY(-4%);
}

Answer 5

Me las arreglé para centrar íconos y convertirlos en un contenedor en lugar de ponerlos en uno.

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}

Answer 6

Si está utilizando Twitter Bootstrap, agregue el centro de texto de la clase a su código.

<div class=''login-icon''><i class="icon-lock text-center"></i></div>