CSS Вертикальное выравнивание

Question

Я немного застреваю, пытаясь выровнять иконки социальных медиа по вертикали. Я пробовал вертикальное выравнивание текста, а верхнее и нижнее поля - 50%, и оба они не работают. Я не уверен, как достичь вертикально выровненного класса ul. Я использую bootstrap, если это имеет значение.

<footer> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-6"> 
         <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p> 
        </div> 
        <div class="col-xs-12 col-sm-6"> 
         <ul class="list-inline"> 
          <li> 
           <a href="#"> 
            <span class="fa-stack fa-lg"> 
             <i class="fa fa-circle fa-stack-2x"></i> 
             <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
            </span> 
           </a> 
          </li> 
          <li> 
           <a href="#"> 
            <span class="fa-stack fa-lg"> 
             <i class="fa fa-circle fa-stack-2x"></i> 
             <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
            </span> 
           </a> 
          </li> 
          <li> 
           <a href="#"> 
            <span class="fa-stack fa-lg"> 
             <i class="fa fa-circle fa-stack-2x"></i> 
             <i class="fa fa-google fa-stack-1x fa-inverse"></i> 
            </span> 
           </a> 
          </li> 
          <li> 
           <a href="#"> 
            <span class="fa-stack fa-lg"> 
             <i class="fa fa-circle fa-stack-2x"></i> 
             <i class="fa fa-youtube fa-stack-1x fa-inverse"></i> 
            </span> 
           </a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </footer>  

    @media (max-width:768px){ 
     footer {text-align: center; padding: 10px;} 
    } 

    @media (min-width: 769px) { 
     footer .list-inline { 
      float: right; 
     } 
     footer .copyright { 
      float: left; 
     } 
    } 

    footer { 
     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     background-color: #eee; 
     padding-top: 5px; 
    } 
    footer .list-inline { 
     text-align: center; 
    } 
    footer .copyright { 
     font-size: 14px; 
    } 

Answer 1

В любом случае, text-align: center; не поможет для вертикального выравнивания элементов.

Если сноска имеет фиксированную высоту, вы можете попробовать:

footer .list-inline { 
    line-height: 40px; /* adjust the value to the height of your footer */ 
} 

Answer 2

вы можете добавить

.list-inline > li{`position:relative;top:50%` ; transform:translateY(-50%)} 

это должно сделать трюк;

---

Объяснение:

position:relative;top:50% перемещает его вниз к середине, совместив верхнюю часть картины.

transform:translateY(-50%) выравнивает изображение до середины.