Centering a nav in html5 that's responsive and uses borders - html

Question

I have found lots of ways to center a nav using tricks. Either by setting the line height and the height equal to each other or using vertical-align with display:table. It worked but my border always came at the bottom of the container rather than text.
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
display:block;
}
nav a{
height:100%;
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
To clarify the problem, I want to vertically center the text or the "a" tags within the header block. I would like to do this and also be able to put borders on the "a" tag where the border is close to the text.

Answer 1

You could use the table-cell display vertical-align approach.
* {
margin:0px;
padding:0px;
}
header {
display:table;
width: 100%;
height: 100px;
background-color:blue;
}
nav {
height:auto;
width:100%;
display:table-cell;
vertical-align: middle
}
nav a {
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
position: relative;
border-bottom: 3px solid blue;
}
nav a:hover {
border-bottom: 3px solid #F3008A;
}
<header>
<nav> Link
Link
Link
Link
</nav>
</header>
http://jsfiddle.net/wdabedbv/

Answer 2

You need to remove display:inline-block; and give line-height. It will solved your issue.
Check below your updated code:
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
}
nav a{
height:100%;
text-align:center;
line-height:100px;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>

Answer 3

Try to use :Before as i did since your Height of the nav is fixed it wont be a problem.
Fiddle Link Demo
* {
margin: 0px;
padding: 0px;
}
header {
display: block;
height: 100px;
background-color: blue;
}
nav {
height: 100%;
width: 100%;
display: table;
}
nav a {
height: 100%;
text-align: center;
display: inline-block;
text-decoration: none;
color: black;
margin-left: 25px;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}
nav a:hover:before {
background-color: #F3008A;
postion: absolute;
width: 50px;
content: "";
height: 3px;
position: absolute;
z-index: 4;
top: 64px;
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>

Answer 4

I would assert that it is best to use flexbox since it is modern and responsive. The following will work nicely in all relatively modern browsers.
nav {
display: -webkit-flex;
display: flex;
}
nav > div {
background-color: pink;
height: 40px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-contents: center;
justify-contents: center;
-webkit-align-items: center;
align-items: center;
}
nav > div:nth-child(odd) {
background-color: red;
}
nav > div > a {
text-align: center;
-webkit-flex: 1;
flex: 1;
}
<nav>
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
</nav>
See this JSFiddle.
Here is a helpful guide with pictures.