Html 垂直对齐：中间对齐

我试图将两个链接垂直对齐到徽标两侧的中间位置，但似乎不起作用。此外，我希望这是一个响应导航与两个链接出现在手风琴下拉式时尚的标志下。我一直在到处寻找解决办法，但我找不到

HTML

谢谢你能提供的任何帮助

ul#nav li
{
vertical-align: top; // takes the links to the top
padding-top: 10px; // modify so that it goes to middle
}

如果您试图将链接放置在图像的中间，则此代码应该起作用。告诉我它是否有效

我在这里拉小提琴

---

您的HTML无效：

img

不能是

ul

的直接子项，它应该包含在另一个

li

中，以便example@FelipeAls，即使img被放置在ul@Hawk在web前端世界中，依靠浏览器纠正错误并不是一种非常稳健的做法。我已经被这个问题困扰了无数次，所以我的第二步是验证我的代码是否至少有效（我的第一步是验证我正在刷新我试图修改的相同页面，尤其是在周一），但是“体验”下拉菜单显示的链接之间的距离是原来的两倍。我想将我在这里所做的与这样的事情结合起来，一旦页面缩小，链接就会出现在徽标下。你确定链接之间的距离是原来的两倍吗？因为我将子链接设置为没有填充和我的小提琴“发布”显示的距离与链接向下放置时显示的距离完全相同。我不明白当页面缩小时，在徽标下显示的链接是什么意思。请详细说明，对不起，体验下拉菜单，我已经纠正了我的错误，请查看此小提琴。

* { 
   margin: 0px;
   padding: 0px;
}

header {
    width: 100%;
    text-align: center;
}

.center h1 {
    display: inline;
    vertical-align: 60%;
}


ul#nav {
    text-align: center;
    vertical-align:top;
}

ul#nav li {
    width: 125px;
    position: relative;
    margin-right:5px;
    line-height: 25px;
    border-radius: 10px;
    display: inline-block;
    padding: 5px;
}

ul#nav a {
   text-decoration: none;
   display: block;
   width: 125px;
   height: 25px;
   line-height: 25px;
   background-color: #f3f3f3;
   border: 1px solid #ccc;
   border-radius: 5px;
   text-align: center;
}

ul.boat, ul.experience {
   list-style-type: none;
   display: inline-block;
   text-align: center;
   font-size: 1em;
   position: absolute;
   top:100%;

}

ul#nav li:hover > a {
   background-color: yellow;
}

ul#nav ul.boat, ul.experience {
   display:none;
}

ul#nav li:hover ul.boat {
   display: block;
}

ul#nav li:hover ul.experience {
   display: block;
}

ul#nav li
{
vertical-align: top; // takes the links to the top
padding-top: 10px; // modify so that it goes to middle
}