Html 引导3将文本垂直对齐到图标

我正在尝试使用Bootstrap3在按钮内垂直对齐ionicon图标和文本

我希望文本与按钮中心垂直对齐，图标也垂直对齐

默认设置似乎是使用图标和文本的最低点将其对齐

我的HTML是：

<div class="col-xs-4 text-right">
   <a href="/signout" class="btn btn-xs btn-danger sign-out">
      <i class="ion-power ion-fw"></i>
      <span class="menu-label">Sign Out</span>
   </a>
</div>

我的CSS目标对OK，因为它们的颜色是正确的。我试过在

菜单标签上填充空格和边距，但这会移动文本和图标

如何将文本调整到图标高度的中间位置？谢谢

例如：
更改此选项

 .ion-fw {
    width: 1.28571429em;
    text-align: center;
}

对此

.ion-fw {
    width: 1.28571429em;
    text-align: center;
   vertical-align: middle;
}

垂直对齐
作用于同一容器中的元素，因此必须应用于内容…而不是父元素


.ionfw{
宽度：1.28571429em；
文本对齐：居中；
垂直对齐：中间对齐；
}

更改此选项

 .ion-fw {
    width: 1.28571429em;
    text-align: center;
}

对此

.ion-fw {
    width: 1.28571429em;
    text-align: center;
   vertical-align: middle;
}

垂直对齐
作用于同一容器中的元素，因此必须应用于内容…而不是父元素


.ionfw{
宽度：1.28571429em；
文本对齐：居中；
垂直对齐：中间对齐；
}

这对我很有用：


.ionfw{
显示：内联块；
垂直对齐：底部对齐；
高度：1.4em；
字体大小：1.1米；
}

这对我很有用：


.ionfw{
显示：内联块；
垂直对齐：底部对齐；
高度：1.4em；
字体大小：1.1米；
}

您是否尝试过将负值应用于文本元素的上边缘？您好@Christian Hill，是的，我尝试过，但它不是在玩球。这应该是直截了当的，但到目前为止它已经击败了我。你有没有尝试将负值应用到文本元素的上边缘？嗨@Christian Hill，是的，我有，它不是在玩球。这应该是直截了当的，但它已经打败了我。嘿@Paulie_D真棒，谢谢！但在您的示例中，文本现在太高了。它似乎并没有使两者并排居中。无论图标和文本的字体大小如何，是否有办法做到这一点（我的图标比文本稍大。你可以试着在
span
上放置垂直对齐，或者，也可以试着在
middle
上放置
baseline
。尝试一下，但是如果你使用不同的字体大小，可能没有一个完美的解决方案。嘿@Paulie\u D太棒了，谢谢！但是在你的例子中，文本现在是o高。它似乎没有将两个图标并排居中。有没有一种方法可以做到这一点，而不考虑每个图标和文本的字体大小（我的图标的大小略大于文本。您可以尝试在
span
上放置垂直对齐，也可以尝试在
中间
上放置垂直对齐。尝试
基线
。但是如果使用不同的字体大小，可能没有完美的解决方案。