現在FontAwesomeを使用していますが、コンテナ内でアイコンを垂直方向と水平方向の両方に中央揃えするのは非常に困難です。私はポジショニングによってそれを試してみましたが、アイコンのサイズが異なっていたという問題に遭遇しました。私は基本的に水平を持ち、垂直を取得しようとしています。
<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;
}
必要なものはこれだけです。ラッパーは必要ありません。
.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;
}
変換を使用してオフセットを修正しました。人生の指輪のような丸いアイコンに最適です。
<span class="fa fa-life-ring"></span>
.fa {
transform: translateY(-4%);
}
だから私はついにそれを得ました( 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>
.login-icon [class * = 'icon-']の高さを28pxに下げました。ここにフィドルがあります: http://jsfiddle.net/mZHg7/
.login-icon [class*='icon-']{
height: 28px;
width: 50px;
display: inline-block;
text-align: center;
vertical-align: baseline;
}
アイコンを中央に配置し、アイコンを1つにまとめるのではなく、コンテナにする方法を管理しました。
.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;
}
Twitter Bootstrap=を使用している場合、コードにクラステキストセンターを追加します。
<div class='login-icon'><i class="icon-lock text-center"></i></div>