Центрирование значков FontAwesome по вертикали и по горизонтали

В настоящее время я использую FontAwesome, и мне очень сложно центрировать значки как по вертикали, так и по горизонтали в их контейнере. Я попытался сделать это с помощью позиционирования и столкнулся с проблемами. Bc размеры иконок были разными. У меня в основном есть горизонталь, и я пытаюсь получить вертикаль.

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

Ответ 1

Это все, что вам нужно, без оболочки:

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

Ответ 2

Я использовал преобразование для коррекции смещения. Он отлично работает с круглыми значками, такими как кольцо жизни.

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

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

Ответ 3

Итак, я наконец получил его (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>

Ответ 4

Я просто опустил высоту до 28 пикселей на иконке .login [class * = 'icon-'] Здесь скрипка: http://jsfiddle.net/mZHg7/

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

Ответ 5

Мне просто удалось центрировать значки и сделать их контейнером, а не складывать их в один.

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

Ответ 6

Я имел успех, используя функцию заполнения. Школа W3C демонстрирует это здесь: https://www.w3schools.com/css/css_table.asp

Ответ 7

Если вы используете twitter Bootstrap, добавьте текстовый центр класса в свой код.

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