Bootstrap vertikale Mitte Container in Fußzeile

Question

Ich versuche, eine Fußzeile für meine erste Seite in Bootstrap zu erstellen, und es sieht gut aus, außer der Inhalt sollte vertikal zentriert werden. Nach der Überprüfung der Elemente in Chrome sieht das tatsächliche Containerelement ungefähr 50% der Höhe des übergeordneten Fußzeilenelements aus.

Jetzt konnte ich das teilweise beheben, indem ich die "line-height" an die "height" -Eigenschaft der Fußzeile anpasste, aber dadurch verursachte ein Teil des Inhalts deutlich unterhalb der Fußzeile. Was mache ich falsch und wie kann ich das beheben?

Ohne line-height:

Mit line-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

Sie können display:flex + align-items:center verwenden, um das zu erreichen.

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

jsfiddle

Answer 2

Sie können Tabelleneigenschaften für die vertikale Ausrichtung verwenden.

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; 
} 

Arbeitsbeispiel: https://jsfiddle.net/62shy0ob/1

Answer 3

Versuchen Hinzufügen padding-top und padding-bottom statt line-height:

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

}