在Bootstrap中垂直居中对齐列

Question

我尝试了十几种方法来在bootstrap中垂直居中对齐列，但都没有成功。我的问题是我不知道列的高度。我可以使用flexbox吗？它嵌入在Bootstrap 3中吗？ 我的代码:

<div class="row">

  <div class="col-sm-12">

    <div class="col-md-2" style="padding: 0px">
      <img alt="img" src="image/avatar/unknown.png" class="img-responsive forum-avatar">
    </div>

    <div class="col-md-6">
      <span class="qap-q-author">user1</span>
      <br>
      <span class="qap-q-h">test</span>
    </div>

    <div class="col-md-2">
      <span class="text-muted pull-right qap-a-cnt">
        <span>&nbsp;&nbsp;</span>
        <span class="badge">1</span>
      </span>
      <span class="qap-q-h pull-right">1</span>
    </div>

    <div class="col-md-2">
      <i class="fa fa-group" style="font-size: 32px"></i>
    </div>
  </div>
</div>

- AVEbrahimi

---

请在此处发布您的示例代码。 - ketan

Answer 1

Flexbox可以使用，但是您需要注意旧的浏览器。在Bootstrap中居中对齐列在这里得到了完美的解释。请看在bootstrap中居中对齐列

您可以通过使用flexbox来将列居中对齐。

您可以将此类添加到要居中对齐的

的父容器中:

.v-center {
   display: flex;
   align-items: center;
}

了解有关垂直对齐列的更多信息，请参见此处：垂直对齐列

- ashfaq.p

---

我也更新了垂直对齐的答案。 - ashfaq.p