Bootstrap 3垂直对齐文本到离子图标答案

【问题标题】：Bootstrap 3 vertical align text to ioniconBootstrap 3垂直对齐文本到离子图标
【发布时间】：2016-04-27 14:45:16
【问题描述】：

我正在尝试使用 Bootstrap 3 在按钮内以垂直方式将离子图标和文本与其侧面对齐。

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

默认似乎是使用最低点对齐图标和文本。

我的 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 上尝试过填充和边距，但这会移动文本和图标。

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

示例：

【问题讨论】：

您是否尝试将负值应用于文本元素的上边距？
嗨@Christian Hill，是的，我有，但它不是在打球。这应该是直截了当的，但到目前为止它已经打败了我。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

嘿@Paulie_D 太棒了，谢谢！但是在您的示例中，文本现在太高了。它似乎并没有将两者并排居中。无论每个图标和文本的字体大小如何，有没有办法做到这一点（我的图标比文本略大。
您可以尝试在span 上放置垂直对齐，而不是https://jsfiddle.net/Paulie_D/ojbqd918/，也许，而不是middle 尝试baseline。尝试一下，但如果您使用不同的字体大小，可能没有完美的解决方案。

【解决方案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>

【讨论】：