Text vertikal zentriert in Sticky BootStrap Fußzeile

Question

Ich habe großes Problem mit vertikalen Zentrum in BS Fußzeile. Mein Code unten:

<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
       <ul class="nav nav-pills nav-justified"> 
       <li><a href="#">SITE1</a></li> 
       <li><a href="#">SITE2</a></li> 
       </ul> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
       <div class="center-inner"> 
       <p class="text-muted inner">Some text.</p> 
       </div> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
       <p>More text.</p> 
      </div> 
     </div> 
    </div> 
</div> 

JSFiddle

Unfortunatelly, Text in der 2. und 3. Säule ist nicht vertikal zentriert. Ich habe versucht, Lösungen aus ähnlichen Themen, aber leider - ohne gute Auswirkungen in Sticky Footer (in den meisten Fällen geändert Fußzeile Höhe und Layout - nach dem Hinzufügen von Anzeige: Tabelle).

Below i Grafik veranschaulicht hochgeladen, wie es heute aussieht, und wie ich würde es aussehen mögen:

Startseite jemand kann mir helfen, mit diesem.

Answer 1

können Sie verwenden:

.center-vertical{ 
    display: flex; 
    align-items: center; 
} 

(gilt nur Eltern Boxen)

https://jsfiddle.net/kaskull/z4wLpk9h/5/

Answer 2

Es liegt daran, dass Ihre Links eine Auffüllung haben, so dass Sie auch Padding in Tag hinzufügen sollten.

.footer [class*="col-"] p { 
    padding: 10px 15px; 
    margin: 0; 
} 

Arbeiten Demo

Answer 3

Versuchen Sie, diese

Sie können die media-query Wert den Break-Punkt zu setzen.

Check Arbeiten demo

HTML aktualisiert:

<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;"> 
    <div class="container"> 
    <div class="row row-eq-height"> 

     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
     <ul class="nav nav-pills nav-justified"> 
      <li><a href="#">SITE1</a></li> 
      <li><a href="#">SITE2</a></li> 
     </ul> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
     <div class="center-inner"> 
      <p class="text-muted inner">Some text.</p> 
     </div> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
     <p>More text.</p> 
     </div> 


    </div> 


    </div> 
</footer> 

CSS:

@media screen and (max-width: 767px) { 
    .row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    align-items: center; 
    } 
} 


} 
footer [class*="col-"] p { 
    padding: 10px 15px; 
    margin-bottom: 0; 
} 

Answer 4

diese Bitte überprüfen.

footer .text-muted.inner, footer p{padding:10px 15px;margin:0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
       <ul class="nav nav-pills nav-justified"> 
 
       <li><a href="#">SITE1</a></li> 
 
       <li><a href="#">SITE2</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
 
       <div class="center-inner"> 
 
       <p class="text-muted inner">Some text.</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"> 
 
       <p>More text.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</footer>

Hope this Ihnen helfen.

Danke.