Bootstrap 3垂直对齐文本到ionicon

Question

我正在尝试使用Bootstrap 3在一个按钮内以垂直方式将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是：

.main-header .navbar .dropdown-menu li a.sign-out {
   color: #fff !important;
   vertical-align: middle;
}

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

我的CSS目标是OK，因为它们的颜色是正确的。我在.menu-label上尝试了填充和边距，但会移动文本和图标。

如何将文字调整到图标高度的中间？谢谢！

实施例：

Answer 1

更改此

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

到这个

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

vertical-align适用于同一容器中的元素，因此必须应用于内容...而不是父元素。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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>

Answer 2

这对我有用：

.ion-fw {
  display: inline-block;
  vertical-align: bottom;
  height: 1.4em;
  font-size: 1.1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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>