2

我已经尝试解决这个问题几个小时了，我一直在寻找一个好的解决方案，但没有太多运气。它让我发疯，摆弄填充和行高。垂直对齐它没有做任何事情（这是在另一个线程中建议的）。

基本上我正在尝试创建一个响应式导航菜单，当点击或单击图标时，当菜单显示时将向下推页面。我在不使用框架的情况下使用移动优先策略（该站点很简单，所以我觉得 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。两种方法都存在问题。

这可能是一件简单得可笑的事情，我很可能最终会踢自己的屁股，但我的大脑已经炸了，所以我希望你能帮忙。

4

1 回答 1

3

您需要更改 .fa-bars 的 css：之前，这是错误定位的元素。

尝试：

.fa-bars:before {
    content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
    display:block;
    margin-top:-1px;
}

此外，线条的高度似乎很奇怪，所以它不会正确定位。我将圆圈的大小更改为 49 像素，使其居中。

分叉的jsfiddle 。

于 2014-04-02T23:53:45.540 回答