导航栏图像不会垂直对齐 (CSS)

Question

我想在我的导航栏中包含一些社交媒体图标，但它们拒绝与我的导航栏的其余部分垂直对齐。

这里有一个 JSFiddle，所有 div 周围都带有红色边框，因此您可以很容易地看出问题所在。出于某种原因，这两个社交媒体图标与它们所属的 ul 的其余部分不在同一层级。

有什么建议吗？

Answer 1

避免使用百分比填充和图像的特定宽度，它们仍然是百分比。以像素为单位分配宽度以使其固定。

.navbar img {
    width: 20px;
    height: 20px;
    /*padding: 0 2% 0 2%;*/
}

这是更新的JSFiddle

Answer 2

试试这个：

将您的 <a /> 样式更改为：

a {
    text-decoration: none;
    color: white;;
    display: inline-block;
    vertical-align: middle;
}

然后设置 <img /> 像素宽度：

.navbar img {
    width:55px;
}

查看此更新fiddle