Загрузочный вертикальный контейнер в нижнем колонтитуле

Я пытаюсь создать нижний колонтитул для своей первой страницы в Bootstrap, и это выглядит отлично, за исключением того, что содержимое должно быть центрировано по вертикали. После проверки элементов в Chrome, похоже, что фактический элемент контейнера составляет около 50% высоты элемента родительского нижнего колонтитула.Загрузочный вертикальный контейнер в нижнем колонтитуле

Теперь я смог частично исправить это, установив «высоту линии» в соответствии с свойством «высота» нижнего колонтитула, но при этом часть содержимого выглядела значительно ниже нижнего колонтитула. Что я делаю неправильно и как я могу это исправить?

Без Line-Рост:

С Line-Рост:

<!-- 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:[email protected]"><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; 
}

источник

2016-08-21 Anonymous

Вы можете использовать display:flex + align-items:center для достижения этого.

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

jsfiddle

источник

2016-08-21 10:09:09 QoP

Это прекрасно, не было известно ни об одном из этих! Значки справа, похоже, больше выравниваются с верхней строкой текста, чем вертикально центрируют себя, но его достаточно близко! Большое спасибо. –

Вы можете использовать свойства таблицы для вертикального выравнивания.

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:[email protected]"><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

источник

2016-08-21 10:00:19

Рабочий пример, который вы связаны все еще имеет содержание в верхней части колонтитула, а не вертикально по центру для меня –

@BrettPowell Проверьте обновление: https://jsfiddle.net/62shy0ob/1/ –

Попробуйте добавить обивка-топ и обивка-дно вместо линии высоты:

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

}

источник

2016-08-21 10:07:08

Загрузочный вертикальный контейнер в нижнем колонтитуле

ответ

Смежные вопросы