CSS3 Text Won't Vertically Align

Question

I'm trying to make a footer for my website but the text inside the footer is displaying half in and half out of the footer div. I attempted to correct it using all the methods suggested in How do I vertically center text with CSS? and searched other ideas on the internet but none worked (unless I messed up applying them to my code). Here's my code. JSFiddle: http://jsfiddle.net/xyqgpr14/2/

Footer html

<nav class="navbar navbar-default navbar-bottom" role="navigation">
    <div class="container">
        <h1>Footer</h1>
    </div>
</nav>

Style CSS:

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

score 0 · Answer 1 · answered Feb 14 '15 at 10:32

0

The latest method involves:

.container {
   position:relative;
}

h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

Or something similar.

answered Feb 14 '15 at 10:32

Ian Devlin

18,534
6
55
73

This solution worked in JSFiddle but when I copied it EXACTLY to my website the footer moved to the middle of the webpage and messed up the entire web page. – Will Scott Feb 14 '15 at 10:36
Try adding margin: 0 auto; to your nav element. – Ian Devlin Feb 14 '15 at 10:42

score 0 · Accepted Answer · answered Feb 14 '15 at 10:37

0

Since you are using Bootstrap, hence a default margin or padding is present in the nav.

Add this to the css:

.navbar-bottom * {
    padding: 0;
    margin: 0;
}

This will remove any margin/padding in the child divs of nav.

Here is the updated Fiddle: http://jsfiddle.net/xyqgpr14/3/

answered Feb 14 '15 at 10:37

Anupam Basak

1,503
11
13

Thank you, this worked, I didn't know that CSS had ' * ', and changing the individuals' margin and padding did nothing. – Will Scott Feb 14 '15 at 10:40

Anwar Hussain · Answer 3 · 2015-02-14T11:07:08.020

There are multiple methods you can use. Here're the latest methods:

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

.navbar-bottom .container {
   position:relative;
}

.navbar-bottom h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Or

.navbar-bottom {
    background-color: #222;
    border-top: 2px solid #000;
    height: 50px;
    color: #777;
    text-align: center;
}

.navbar-bottom .container {
    display: table;
}

.navbar-bottom h1 {
    display: table-cell;
    vertical-align: middle;
}

Ian D. already said about second one, you can try mine though! I think that did not work since you copied his code EXACTLY he wrote. Please target specific element in CSS otherwise that could overwrite other code from above. My code can be copied EXACTLY as it is! Both of them work fine. Just simply copy any of them to your jsfiddle and see the impact. :)

CSS3 Text Won't Vertically Align

3 Answers3