水平导航菜单中的垂直对齐图像答案

【问题标题】：Vertical align image in horizontal nav menu水平导航菜单中的垂直对齐图像
【发布时间】：2016-01-18 19:58:23
【问题描述】：

我很难在此处对齐水平导航菜单中的徽标图像：

嗯，这就是我想要实现的目标：

但我真的很困惑我应该编辑哪个元素来实现这一点。

将vertical-align: middle 插入到img 中，正如我在其他问题中所读到的，似乎并没有奏效。

【问题讨论】：

不要为 img 设置样式 - 为包含它的 a 设置样式
寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
@Chris 仍然没有运气。
@Paulie_D 你是对的，但我真的不知道代码的哪一部分应该复制到这里。我会根据答案努力编辑它。

【解决方案1】：

.sf-menu li:first-child a, .sf-menu li:first-child a:hover {
    padding: 0;
}   
 li.menu-item a {
        padding-top: 20px;
    }

另外，将 margin-top 设置为最大 5px-10px

nav#topmenu{
margin-top:5px;
}

【讨论】：

它开始了。我只是在悬停在菜单标题上时遇到了一些事情。现在正在努力..
只需在正常和悬停时设置相同的填充 .sf-menu li a:hover { padding: 20px 12px; } li.menu-item a { 填充：20px 12px; }
同时移除#midsectionhr{border-top:0;}的border-top
完美。感谢您的详细说明！还有边界建议！

【解决方案2】：

只需移除 padding-top 和 bottom :)

ul li a.menu-image-title-hide.menu-image-not-hovered {
  padding: 0px 12px;
}

【讨论】：

【解决方案3】：

在style.css中添加css

.sf-menu a.menu-image-title-hide.menu-image-not-hovered {
    padding: 0;
}

【讨论】：