尝试将文本放在导航中

Question

所以我只是试图让每个订单项中的文字位于广场的底部，而不是卡在顶部。以下是我的导航看起来像http://imgur.com/QLPBYQK

的屏幕截图

这是我的代码：

<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;
}

Answer 1

如果要垂直居中，请将list-style: none添加到#nav ul li和line-height: 50px（应与height元素的a相同到#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;
}

Answer 2

JSFiddle

添加此属性：

line-height:80px;

到班级：

#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;
}

Answer 3

不要使用身高;而是使用适当的填充顶部。

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

Answer 4

使用填充顶部或 导航

中的行高