html - 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>