已编辑的答案

Question

所需的显示是让左栏中的文字垂直居中（中间）。我无法实现这一目标。这是因为右栏中的图片高于2段文字。有趣的是，橙色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的，这是一种更为罕见的方式，并且尚未得到所有主流浏览器的完全支持。根据{{3}}，很多浏览器都可以使用它，但是对于像IE这样的东西来说它会有问题。

注意：这将覆盖bootstrap的display：float，它可能不是您想要看到的。我会留给你找出间距。 Can I Use对于flex-container和flex-items有一个非常好的并排。

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

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

2 个答案:

已编辑的答案

替代

原始答案