在动态高度bootstrap col中垂直对齐图标

Question

我在bootstrap中有一个警告，我有一个图标以及旁边的一些文本。两者分别分为col-md-1和col-md-11。右侧的文本可以是动态的长度，因此如果长，它将包装到下一行。然而，图标将始终相同。我无法弄清楚如何将图标垂直居中放在其col内。默认情况下，如果文本是一行，则它的中心如下：

但是当文字超过一行时，图标仍保留在同一位置。我尝试在图标的vertical-align:middle上使用<i>（fontawesome），但没有结果 - 在此处找到：

我还尝试将图标放在display:table内以尝试利用vertical-align:middle，但没有运气。我想尽可能保留Bootstrap列间距，但我希望无论文本的长度如何都能使图标居中。

<div class="alert alert-danger"
   role="alert">
    <div class="row">
        <div class="col-md-1">
          <i class="fa fa-exclamation-triangle fa-2x"
            style="vertical-align:middle;"></i>
        </div>
        <div class="col-md-11">
            {{vm.modalConfig.message}}
        </div>
    </div>
</div>

编辑 - 为了方便您的帮助，这里还有plunkr！

Answer 1

您可以在.row和align-items: center;上使用flexbox垂直居中。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .alert > .row {
    display: flex;
    align-items: center;
  }
</style>
<div class="alert alert-danger"
   role="alert">
    <div class="row">
        <div class="col-md-1">
          <i class="fa fa-exclamation-triangle fa-2x"
            style="vertical-align:middle;"></i>
        </div>
        <div class="col-md-11">
            long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flexbox将其置于中心位置，也可以使用position: relative和一些transform属性。

<强> Flexbox的：

.row {
  -webkit-display: flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
}

相对定位：

.row {
  position: relative;
}
.row col-md-1 {
  position: absolute;
  top: 50%;
  transform: translate&(-50%);
}

选项1绝对是更快的解决方案。我还建议在.row中添加单独的类或ID，这样您就不会在整个框架中应用这些更改。