使用css在我的导航栏中将fa图标与fa图标对齐

Question

我可能是一个完美主义者，但我希望我的文字与图标的中心对齐......

我想将指南针向下移动几个像素，但是使用填充和边距只会改变它们所在的菜单栏的大小。同时位置相对和底部都移动。

我的代码是

<p class="nav navbar-nav navbar-left" id="townlabel">
<i class="fa fa-compass fa-2x" id="compassicon"></i>Glastonbury
</p>

的CSS

#townlabel {
display: inline-block;
}
#compassicon {
display: inline-block;
margin: 5px;
}

Answer 1

您可以使用vertical-align: middle来解决此问题。

#townlabel * {
  display: inline-block;
  vertical-align: middle;
}

https://jsfiddle.net/tudrLv03/

Answer 2

尝试：

#compassicon {
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

如果这不起作用，那么这将是，虽然这是不那么“正确”的方式：

#compassicon {
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
}

您可能需要调整top值才能获得您想要的效果。