Saat ini saya menggunakan FontAwesome, dan saya mengalami kesulitan untuk memusatkan ikon baik secara vertikal maupun horizontal di dalam wadahnya. Saya telah mencoba melakukannya melalui pemosisian dan mengalami masalah karena ukuran ikonnya berbeda. Pada dasarnya saya memiliki horizontal, dan saya mencoba untuk mendapatkan vertikal.
<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;
}
Hanya ini yang Anda perlukan, tidak perlu pembungkus:
.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;
}
Jadi akhirnya saya mendapatkannya(
):.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>