2013-07-14 63 views
34

私は現在FontAwesomeを使用していますが、アイコンをコンテナ内で縦と横の両方にセンタリングするのは本当に苦労しています。私はポジショニングでそれをやろうとしましたが、アイコンサイズが違っていました。私は基本的に水平を持っており、垂直を取得しようとしています。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/

答えて

36

、このI: はここにフィドルですsのあなたが必要とするすべては、何のラッパーは必要ありません:私はオフセットを補正するために変換を使用している

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

+6

中心に見ていないと思います。 vertical-alignはここでは使用されません。 – Pierozi

6

だから私は最終的に(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> 
+0

私の答えを見て、私はあなたがそうあなたは難しい、これは動的ではありません 'ラインheight'をコード化している –

1

私はちょうど.loginファイルアイコンの上に28pxする高さを下げ、[クラス* = 'icon-'] http://jsfiddle.net/mZHg7/

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

。ライフリングのような丸いアイコンでうまくいきます。

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

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

ようこそStackOverflow!答えは常に高く評価されていますが、この質問は3年前に尋ねられ、すでに解決策がありました。問題が解決済みとマークされていないか、または問題に対して劇的に改善された代替アプローチが見つかった場合を除いて、回答を提供することによってトップに「バンプする」質問を避けるようにしてください:) –

+5

あなたの回答はたくさんの助けを得ました – Infated

+2

@ ObsidianAge - 3のためにCSSの11行を交換する方が良い解決策ではない(私たちの多くが定期的に行っている非常に広範な問題に)、私は何か分からない。 – Jules

0

twitterブートストラップを使用している場合は、クラスにテキストセンターを追加してください。

<div class='login-icon'><i class="icon-lock text-center"></i></div> 
関連する問題