我已经尝试解决这个问题几个小时了,我一直在寻找一个好的解决方案,但没有太多运气。它让我发疯,摆弄填充和行高。垂直对齐它没有做任何事情(这是在另一个线程中建议的)。
基本上我正在尝试创建一个响应式导航菜单,当点击或单击图标时,当菜单显示时将向下推页面。我在不使用框架的情况下使用移动优先策略(该站点很简单,所以我觉得 Bootstrap 是矫枉过正)。
但是图标顶部似乎有一个额外的 1px。
我正在使用 Chrome,我已经复制了这个问题供大家查看。
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
您可以查看结果:http: //jsfiddle.net/thecornishninja/jK8rD/
看到图标不是垂直居中了吗?看起来它顶部有一个额外的 1px 或 2px,无论我使用 rem 还是 px,它都在那里。
我使用的是 Fontastic 的代码,但出于演示目的,我使用的是 Bootstrap 中更简单的 CSS。两种方法都存在问题。
这可能是一件简单得可笑的事情,我很可能最终会踢自己的屁股,但我的大脑已经炸了,所以我希望你能帮忙。