vertical align NAV into HEADER

Question

I have a fixed header with a <nav> into it. The problem is that I tried a lot of things, but my elements don't vertically align on middle. I cannot use line-height because it depends on screen resolution.

header {
    width: 100%;
    height: 15%;
    background-color: rgba(30, 30, 30, 0.75);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    position: fixed;
    text-transform: uppercase;
    overflow: hidden;
}

header nav {
    text-align: center;
    display: inline-block;
    position: absolute; 
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;

}

header nav a {
    /*line-height: 6;*/
    color: white;
    padding: 14px 16px;
    text-align: center;
    display: inline;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

<header>
    <div>
        <nav>
            <a class="active" href="">Home</a>
            <a href="">News</a>
            <a href="">Info</a>
            <a href="">Contact</a>
        </nav>
    </div>
</header>

http://jsfiddle.net/JJ8Jc/4082/ http //jsfiddle.net/JJ8Jc/4082/

Answer 1

You can use display flex method to align elements vertically and/or horizontally

I just added

 header nav {
 display:flex;
 justify-content: center;
 align-items: center;
}

so you example now become:

 header { width: 100%; height: 15%; background-color: rgba(30, 30, 30, 0.75); color: white; font-family: 'Roboto', sans-serif; font-weight: bold; text-align: center; position: fixed; text-transform: uppercase; overflow: hidden; display:flex; } header nav { text-align: center; display:flex; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: 0; justify-content: center; align-items: center; } header nav a { /*line-height: 6;*/ color: white; padding: 14px 16px; text-align: center; display: inline; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } 

 <header> <div> <nav> <a class="active" href="">Home</a> <a href="">News</a> <a href="">Info</a> <a href="">Contact</a> </nav> </div> </header> 

Answer 2

on your .nav css, change top: 0; for top: 50%; then add these lines:

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

and remove bottom: 0;

jsfiddle

Alternatively, you could use padding-bottom and padding-top to increase the header size keeping the content on the middle. Or, yet, let it flex like the other answer has already suggested.

 header { width: 100%; height: 15%; background-color: rgba(30, 30, 30, 0.75); color: white; font-family: 'Roboto', sans-serif; font-weight: bold; text-align: center; position: fixed; text-transform: uppercase; overflow: hidden; } header nav { text-align: center; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; left: 0; margin: 0; } header nav a { /*line-height: 6;*/ color: white; padding: 14px 16px; text-align: center; display: inline; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } 

 <header> <div> <nav> <a class="active" href="">Home</a> <a href="">News</a> <a href="">Info</a> <a href="">Contact</a> </nav> </div> </header>