ブートストラップ垂直中央コンテナ（フッタ）

Question

ブートストラップで最初のページのフッタを作成しようとしていますが、内容が垂直に中央揃えされている以外は問題はありません。 Chromeの要素を調べた後、実際のコンテナ要素が親フッター要素の高さの約50％のように見えます。

"line-height"をフッターの "height"プロパティに合わせて部分的に修正することができましたが、その際に内容の一部がフッターの下に表示されました。私は間違って何をしていますか？これをどのように修正できますか？行の高さで

：行の高さがなければ

<!-- Site footer --> 
<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p> 
       <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a> 
       <br /> 
       © Website 2016. All rights reserved. 
       </p> 
      </div> 
      <div class="col-sm-6"> 
       <p class="muted pull-right"> 
        <a href="https://www.facebook.com"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a> 
        <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a> 
        <a href="https://plus.google.com"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a> 
        <a href="mailto:website@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a> 
       </p> 
      </div> 
     </div> 
    </div> 
</footer> 

CSS

footer 
{ 
    height: 100px; 
    background:#fff; 
    margin-top:20px; 
    line-height: 100px; 
} 

Answer 1

これを実現するにはdisplay:flex + align-items:centerを使用できます。

footer 
{ 
    height: 100px; 
    background:#fff; 
    margin-top:20px; 
    display:flex; 
    align-items:center; 
} 

jsfiddle

Answer 2

テーブルのプロパティを使用して、垂直方向の配置を行うことができます。

HTML：

<!-- Site footer --> 
<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p> 
       <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a> 
       <br /> 
       © Website 2016. All rights reserved. 
       </p> 
      </div> 
      <div class="col-sm-6"> 
       <p class="muted pull-right"> 
        <a href="https://www.facebook.com"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a> 
        <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a> 
        <a href="https://plus.google.com"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a> 
        <a href="mailto:website@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a> 
       </p> 
      </div> 
     </div> 
    </div> 
</footer> 

CSS：

footer { 
    background:#fff; 
    margin-top:20px; 
} 

footer p { 
    margin: 0; 
} 

footer .container .row { 
    display: table; 
    width: 100%; 
    height: 100px; 
} 

footer .container .row > div { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 

の作業例：https://jsfiddle.net/62shy0ob/1

Answer 3

てみパディングトップ、代わりに行の高さのパディング下を追加：

footer 
{ 
    height: 100px; 
    background:#fff; 
    padding: 2% 0; 

}