How to center link in nav bar vertically - html

Question

I would like to center my Profile and Skills links in the nav bar. You can take a look at what I have here:
http://rikinkatyal.me/
I have tried many methods and none seem to work.
Thanks in advance.

Answer 1

Instead of messing about with inline styles, clean up your HTML and replace your HTML & CSS for the header in your 'index.css' file with the following CSS and HTML.
CSS for header
#header {
position: fixed;
height: 70px;
width: 100%;
background-image: url(http://rikinkatyal.me/images/header.png);
background-size: 100%;
background-repeat: repeat;
margin: 0px;
z-index: 2;
}
.navBar {
text-align:center;
}
.navBar a {
text-decoration: none;
color: #fff;
font-family:'Source Sans Pro';
font-weight: 300;
-webkit-transition: all 0.5s ease-in-out;
vertical-align: middle;
display:inline-block;
}
.navBar .contactButton {
top: 17px;
right: 10px;
float: right;
position: fixed;
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family:'Source Sans Pro';
font-weight: 300;
color: #fff;
font-size: 17px;
padding: 5px 13px 5px 13px;
border: solid #fff 2px;
-webkit-transition: all 0.5s ease-in-out;
}
HTML for header
<div id="header">
<div class="navBar">
PROJECTS
<a href="#main">
<img id="logo" draggable="False" src="http://rikinkatyal.me/images/logo.png" height="70"/></a>
SKILLS
CONTACT
</div>
</div>
Watch this in a demo => http://jsfiddle.net/pxhw53my/

Answer 2

Add display:inline-block; to the image's anchor element container
<div id="header">
<div class="navBar">
PROJECTS
<a href="#main" style="display: inline-block;"> <!-- Add this style attribute here -->
<img class="logo" id="logo" draggable="False" src="images/logo.png" style="display: inline-block;">
</a>
SKILLS
CONTACT
</div>
</div>
Result:

Answer 3

On the navBar div, set the display to table, and on the nested anchors, set the display to table-cell which will allow for vertical alignment.
.navBar {
margin: 0 auto; //text-align center won't work with a table display (in this instance)
display: table;
}
.navBar a {
display: table-cell;
vertical-align: middle;
}
Also, keep in mind that table displays can't use margins, only padding.