CODEWITHSUNDEEP
htmlcssweb
sirvar
sirvar

Reputation: 308

How to center link in nav bar vertically

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.

Upvotes: 0

Views: 2866

Answers (3)

Alex Cassady
Alex Cassady

Reputation: 116

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.

Upvotes: 0

MarsOne
MarsOne

Reputation: 2186

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/

Upvotes: 1

David Passmore
David Passmore

Reputation: 6099

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

Upvotes: 0

Related Questions