53

現在、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;
}

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

4

8 に答える 8

52

必要なのはこれだけです。ラッパーは必要ありません。

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

于 2013-07-14T20:19:30.700 に答える
9

だから私はついにそれを手に入れました( 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>
于 2013-07-14T20:13:11.630 に答える
2

.login-icon [class*='icon-'] の高さを 28px に下げただけです。

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}
于 2013-07-14T20:15:48.113 に答える
1

垂直変換を使用できます：

<span class="fas fa-user" style="transform: translateY(-10%);"></span>
于 2021-12-19T15:55:56.167 に答える