导航栏图像不会垂直对齐（CSS）

【问题标题】：Nav bar images won't align vertically (CSS)导航栏图像不会垂直对齐（CSS）
【发布时间】：2016-01-31 01:55:49
【问题描述】：

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

这是一个JSFiddle，所有 div 周围都有红色边框，因此您可以轻松查看问题。出于某种原因，这两个社交媒体图标与它们所属的 ul 的其余部分不同。

有什么建议吗？

【问题讨论】：

【解决方案1】：

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

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

这是更新后的JSFiddle

【讨论】：

【解决方案2】：

试试这个：

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

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

然后以像素为单位设置<img /> 宽度：

.navbar img {
    width:55px;
}

查看此更新fiddle

【讨论】：