為什么我的文本不在CSS導航欄的中間垂直？

Question

我一直在努力，沒有成功：C我已經嘗試了vertical-align：middle; 但這不起作用

我基本上希望導航欄文本位於“ nav”類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

您已經在.nav ul li a:link中設置padding-top : 18px ，它將填充top而不是bottom a 18px 。

您也可以使用padding-bottom:18px也可以將padding-top和padding-bottom為9px：

.nav ul li a:link{
    padding: 9px 1%;
    /* Other properties */
}

演示