How to center link in nav bar vertically

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.

I don't see a "Profile" link... there is a "Projects" link, though. Also, what do you mean by "center"? — Sverri M. Olsen, Jan 23 '15 at 23:41
possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — imtheman, Jan 23 '15 at 23:41

score 1 · Accepted Answer · answered Jan 24 '15 at 01:20

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">  
    <a href="#projects" id="projectButton">PROJECTS</a>
    <a href="#main">
      <img id="logo" draggable="False" src="http://rikinkatyal.me/images/logo.png" height="70"/></a>
    <a href="#skills" id="skillButton">SKILLS</a>
    <a href="#contact" id="contactButton" class="contactButton">CONTACT</a>
  </div>
</div>

Watch this in a demo => http://jsfiddle.net/pxhw53my/

I just eyeballed it to fix the alignment. It is a little off center (horizontally). If you find a way to fix that properly, please let me know. Thanks for your help. — sirvar, Jan 24 '15 at 17:31

David Passmore · Answer 2 · 2015-01-23T23:51:58.210

0

Add display:inline-block; to the image's anchor element container

<div id="header">
    <div class="navBar">
        <a href="#projects" id="projectButton" class="navBarLink" style="display: inline;">PROJECTS</a>
        <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>
        <a href="#skills" id="skillButton" class="navBarLink" style="display: inline;">SKILLS</a>
        <a href="#contact" id="contactButton" class="contactButton" style="display: inline;">CONTACT</a>
    </div>
</div>

Result: enter image description here

edited Jan 23 '15 at 23:51

answered Jan 23 '15 at 23:44

David Passmore

6,089
4
46
70

It does work, however, if you look at the arrow on the main div, that is centered. If you scroll where you are able to see the arrow and nav bar together, you can see that the nav bar is not centered. How would I fix that? – sirvar Jan 24 '15 at 17:12

score 0 · Answer 3 · answered Jan 24 '15 at 04:36

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.

How to center link in nav bar vertically

3 Answers3