CODEWITHSUNDEEP
htmlcssnavigation
Bradley Cousins
Bradley Cousins

Reputation: 187

Vertical align navigation link text

My aim is to have the text links to be central inline with the search text, however i want the border around each of the links to stay how they are. basically how to i centre the text without moving the border.

I have tried adding this to the links .home .reviews .store .contact, however this just moves the border. padding-top:20px; margin-top:20px;

Here is my HTML: 

<div id="navigation">

<nav class="navbar">
                <div class="navbarcontainer">
                    <ul class="nav navbar-nav">
                        <li class="home"><a href="#">Home</a></li>
                        <li class="reviews"><a href="#">Reviews</a></li>
                        <li class="store"><a href="#">Store</a></li>
                        <li class="contact"><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>

Here is my CSS: 

/* NAVIGATION */


li {
    display:inline-block;
    float:left; 
    border:1px black solid;
    padding-left:12px;
    padding-right:12px;
    height:60px;
}

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

This is what it currently looks like : https://i.sstatic.net/v0Cnb.jpg

Thankyou for any help

Upvotes: 0

Views: 3323

Answers (2)

Pablo
Pablo

Reputation: 1081

You can use line-height property on links to vertically center:

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 60px;
}

Or, you can also use vertical-align: middle, but keep in mind that this approach is not fully compatible with all browsers (IE8+).

li {
    display:table;
    float:left; 
    border:1px black solid;
    padding-left:12px;
    padding-right:12px;
    height:60px;
}

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

Raik
Raik

Reputation: 386

One way to do it:

li {
    display: block;
    float: left;
    border: 1px black solid;
}

a {
    padding: 19px 12px;
    display: block;
}

a:link, a:visited {
    text-decoration: none;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

Codepen example

Upvotes: 0

Related Questions