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;
}