CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 151

Trying to position the text in my nav

So I'm simply trying to get the text in each line item to be position at the bottom of the square rather than stuck at the top. Here is a screenshot of what my nav looks like https://i.sstatic.net/pNgqr.jpg

And here is my code: 

<div id="nav">
            <ul>
                <li><a href="home.html">Home</a></li>       
                <li><a href="supplies.html">Supplies</a></li>
                <li><a href="faq.html">FAQ</a></li>
            </ul>
        </div>




#nav {
    height: 50px;
    width: 950px;
    margin: auto;
    background-color: #FF5252;
    font-family: sans-serif, Georgia;
    border: 5px solid white;
}

#nav ul {
    margin: 0px;
    padding: 0px;
}

#nav ul li {
    float: left;
    width: 145px;
}

#nav ul li a {
    font-size: 20px;
    text-align: center;
    color: white;
    background-color: #FF5252;
    display: block;
    text-decoration: none;
    height: 50px;
}

Upvotes: 0

Views: 32

Answers (4)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

Use padding-top or line-height in nav ul li a

Upvotes: 0

Malay Sarkar
Malay Sarkar

Reputation: 410

Don't use height; instead use appropriate padding-top.

#nav ul li a {
    font-size: 20px;
    text-align: center;
    color: white;
    background-color: #FF5252;
    display: block;
    text-decoration: none;
    padding-top: 28px;
}

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

JSFiddle.

Add this attribute:

line-height:80px;

To the Class:

#nav ul li a {
    font-size: 20px;
    text-align: center;
    color: white;
    background-color: #FF5252;
    display: block;
    text-decoration: none;
    height: 50px;
    line-height:80px;
}

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22992

Add list-style: none to #nav ul li and line-height: 50px(should be the same as height of the a element, if you want to center the text vertically) to #nav ul li a.

Demo

#nav ul li {
    float: left;
    width: 145px;
    list-style: none;
}

#nav ul li a {
    font-size: 20px;
    text-align: center;
    color: white;
    background-color: #FF5252;
    display: block;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
}

Upvotes: 1

Related Questions