如何在 Bootstrap 行中垂直居中文本

Question

所需的显示是使左列中的文本垂直居中（中间）。我无法做到这一点。这是因为右栏中的图片比两段文字要高。有趣的是，橙色的 div 仅与段落一样高。

内联样式仅用于调试。 正在使用的设计是响应式的，所以我假设以 px 为单位设置高度会使其无响应。

编辑：内联调试样式具有误导性，因此已被删除

<div class="row">
  <div class="col-md-8">
    <div class="vertical-align-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-md-4">
    <img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
  </div>
</div>

Answer 1

在 Bootstrap 4 及更高版本中，您可以将 align-self-center 类添加到列 div 以使其垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8 align-self-center">
    <p>First small paragraph with other elements in it</p>
    <p>Second small paragraph with other elements in it</p>
  </div>

  <div class="col-4">
    <img src="//lorempixel.com/150/300/" class="img-responsive" />
  </div>
</div>

Answer 2

编辑的答案

如果你想让这两个东西有相同的高度，你就会遇到一个自 float 成为一个东西以来就存在的问题。 This Stackoverflow Question 来自 2009 年，大致相同。您可以选择使用该帖子中描述的方法，这基本上等同于将底部边距设置为一些疯狂的巨大数字，以便将底部边缘拉下，但会被溢出 div 隐藏，就像这样。不幸的是，这并不能让您在文本上获得垂直中心，因为实际上拉伸所有高度的是框的边距/填充，而不是内部高度。

.vertical-align-center {
  display: table;
  height: 100%;
  width: 100%;
}
.vertical-align-center .valign-center {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.vertical-align-center > div {
  padding-bottom: 200em;
  margin-bottom: -200em;
}
.overflow-hidden {
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row overflow-hidden">
  <div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
    <div style="background-color: green;" class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4">
    text
  </div>
</div>

备用

现在下一部分是针对display:flex 的，它比较少见，目前还没有被所有主流浏览器完全支持。根据Can I Use 的说法，很多浏览器都可以使用它，但对于像 IE 这样的东西，它会出现问题。

注意：这将覆盖引导程序的 display:float，它可能不是您希望看到的。我会把它留给你来计算间距。 CSS Tricks 有一个非常好的并排的弹性容器和弹性项目。

.row.flex-override {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}
.row.flex-override > .vertical-align-center {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.row.flex-override .vertical-align-center .valign-center {
  align-self: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-override">
  <div class="col-xs-8 vertical-align-center" style="background-color: green;">
    <div class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4" style="background-color:orange;">
    <img src="//lorempixel.com/500/500/cats/1" class="img-responsive" />
  </div>
</div>

原答案

您的代码中有一些随机的小错误，其中最大的错误是您将 height=100% 置于内联样式中。它应该是height:100%

注意：您实际上并不需要 valign-center 类，但在我看来它使它更具可读性。

快乐编码。

.vertical-align-center {
  display: table;
  height: 100%;
  width: 100%;
}
.vertical-align-center  .valign-center {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row">
  <div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
    <div style="background-color: green;" class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-xs-4">
    text
  </div>
</div>