为什么我的文字不能垂直位于我的CSS导航栏中间？

Question

我一直在努力尝试而没有成功：C 我尝试过vertical-align：middle;但那不起作用

我基本上希望导航栏文本位于＆＃34; nav＆＃34;的中心。 class div 它目前停留在底部，不知道为什么

提前致谢

屏幕截图：

CSS

.nav
{
    padding:0;

}
.nav ul li
{
display:inline;
font-family: 'Roboto', sans-serif;
font-size:19px;
}
.nav ul li a:link
{
border-left:1px solid;
padding-top:18px;
padding-right:1%;
padding-left:1%;
background-image:url('/img/grad.png');
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}

HTML

<div class="nav">
            <ul>
                    <li><a href="index.html" style="text-decoration:underline; color:#003B57;">Home</a></li>
                    <li><a href="about/index.html">About</a></li>
                    <li><a href="articles/index.html">Articles</a></li>
                    <li><a href="devotions/index.html">Devotions</a></li>
                    <li><a href="biblestudy/index.html">Bible Study</a></li>
                    <li><a href="schedule/index.html">Schedule</a></li>
                    <li><a href="store/index.html">Merchandise</a></li>
                    <li><a href="contactus/index.html">Contact Us</a></li>
                    <li><a href="donations/index.html" style="border-right:1px solid">Donations</a></li>
            </ul>
        </div>

Answer 1

您是否删除了padding-top:18px;并看到了行为？

尝试

padding-top:9px;
padding-bottom:9px;

Answer 2

padding-top : 18px中的.nav ul li a:link a将18px top bottom而非padding-bottom:18px。

您也可以使用padding-top，也可以将padding-bottom和.nav ul li a:link{ padding: 9px 1%; /* Other properties */ } 设置为9px：

{{1}}

Demo