css - 如何垂直对齐包含图像的 div 中的链接？

Question

我试图在我的网站上制作一个包含 5 个链接的导航栏，但其中一个是位于组中间的图像。你可以看看我这里的 JSFiddle:http://jsfiddle.net/kylerm42/fgtLv/4/ .我将标题设置为 40 像素高，并试图让所有文本链接在 div 中垂直居中。图片比 div 高，应该在顶部，底部悬空。

我试过vertical-align，line-height设置为div的高度，display: flex; align-items: center;，以及我可以在网上找到的任何其他内容，但没有任何效果。我还尝试将图像从标题 div 的其余部分中取出，然后使用 position: relative 将其向上移动 40px，这使它在视觉上看起来正确，但图像的 div 被覆盖了其余的链接，使它们无法点击。知道如何让它像它应该的那样工作吗？谢谢!

Answer 1

你已经尝试了所有方法，但不是 position: absolute; 这是一个合适的方法......在下面的代码片段中，我使用了 left: 50%;首先将 Logo 放在中心，但它仍然没有居中，所以我在 width 中取消了图像大小的 1/2，即 75px 所以我使用了 -38px

Demo

img#logo-nav {
    max-width: 75px;
    position: absolute;
    left: 50%;
    margin-left: -38px;
}