Html CSS中导航栏上垂直居中的图像

我正在尝试用CSS制作一个导航栏，左侧有两个按钮，右侧有一个图像。问题是，我的图像必须适合导航栏的大小，同时，它必须垂直居中。如果有人能帮我解决这个问题，我真的很高兴

---

解决方案：我最终通过使用“flex”和“margin”解决了这个问题（导航栏显示属性设置为flex，左边的图标边距设置为auto，使它位于flex行的右边）。下面是一个代码示例：

https://jsfiddle.net/572bag0z/#&togetherjs=QJn2LqjxTQ

.top-nav {
    position: fixed;
    display: flex;
    overflow: hidden;
    background-color: white;
    align-items: center;
    height: 4em;
    width: 100%;
    box-shadow: 0 .5px 4px;
}
.top-nav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2em;
}
.top-nav img {
    width: 3em;
    margin-left: auto;
    margin-right: .75em;
}

---

从总体上和历史上看，将元素沿纵轴居中一直是一件痛苦的事情。不过情况已经好多了，现在有了一些简单的方法来解决这个问题。我建议使用的

align items

属性。

我认为最简单的方法是添加

页边距顶部：自动；保证金botom：自动到img和
显示：flex或
显示：网格到容器。如果没有flex或grid，它将无法工作。
Codepen:
你能发布你尝试过的东西吗？请阅读：张贴一个代码示例。我使用flex和margin（将图标左边的边距设置为auto）解决了这个问题。这是我所做的一个代码示例，非常感谢。正如你所说，纵轴一直是一个痛苦，flexbox已经来解决我们的痛苦。