CODEWITHSUNDEEP
htmlcssnav
Danny M.
Danny M.

Reputation: 150

horizontally center logo & li elements

I need to align the logo and links horizontally in my navigation. Can you spot where I am going wrong or what I am missing?!

The text links appear to be on the bottom and I'd like to have them move up but unable to achieve this. Any advice would be greatly appreciated.

Please help.

HTML:

<nav>
    <ul>
    <li>ABOUT</li>
    <li>PORTFOLIO</li>
    <li class="logo"><img src="images/danielmaldonado_logo.svg" width="100px"></li>
    <li>RESUME</li>
    <li>CONTACT</li>
    </ul>
    </nav>

CSS:

ul{
    margin:auto;
    line-height:100px;
}


li.logo{
    display:inline-block;
    line-height:10px;
}

nav li{
    display:inline;
    text-align:center;

}

li{
    color:#FFF;
    font-size:14px;
    font-family: montserrat;
    font-weight:thin;
    letter-spacing:2px;
    margin: 0 15px; 0 0;
    line-height:50px;
}

Upvotes: 0

Views: 1264

Answers (2)

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

You can solve by using vertical-align:middle; property set into <li> element.

check this demo jsFiddle

CSS

nav li{
    display:inline;
    text-align:center;
    vertical-align:middle;      // <--- Add this in property
}

I am change font color #FFF to #000 in jsFiddle demo. So you can recharge on your self. Hope this help you!

Upvotes: 0

Arjun
Arjun

Reputation: 1439

you have to add vertical-align : middle for image.

li.logo img{
   vertical-align : middle;
}

Upvotes: 1

Related Questions