Brett Powell Brett Powell - 3 months ago 16
CSS Question

Bootstrap vertical center container in footer

I'm attempting to create a footer for my first page in Bootstrap and it looks fine except the contents should be centered vertically. After inspecting the elements in Chrome, it looks like the actual container element is about 50% the height of the parent footer element.

Now I was able to partially fix this by setting the "line-height" to match the "height" property of the footer, but when doing so, it caused part of the contents to appear well below the footer. What am I doing wrong and how can I fix this?

Without Line-Height:

enter image description here

With Line-Height:

enter image description here

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

QoP QoP
Answer

You can use display:flex + align-items:center to achieve that.

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

jsfiddle

Comments