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

Question

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

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

Answer 1

你已尝试过所有内容，但position: absolute;这是一种合适的方式..在下面的代码段中，我使用left: 50%;首先将徽标放在中心，但仍然不是' t居中，所以我否定了75px中width的图片大小的1/2，所以我使用了-38px

Demo

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