html - 如何垂直居中 Bootstrap 列文本？

Question

我想在中间垂直显示文本(如果图像较小，则显示图像)。但我无法完成它。有帮助吗？

这是我现在拥有的:Jsfiddle

HTML:

<div class="container overview-sm">   
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="box2">
                <img class="image" src="http://via.placeholder.com/450x450">
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="box2">
                <h1 class="content-title">Lorem impsum</h1>
                <hr>
                <p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
            </div>
        </div>
    </div>
</div>

CSS:

.box2 {
    margin: 5px 5px 5px 0;
    text-align: center;
    display: inline-block;
    width: 100%;
}
.image{
    width: 100%;
    max-width: 450px;
}
.row{
  padding-bottom: 30px;
}

我想要的图像:Image

Answer 1

最简单的方法是使用 Flexbox。请注意，较旧的浏览器可能没有很好/任何 Flexbox 支持:https://caniuse.com/#search=flexbox )

如果您使用的是 Bootstrap 4，其网格使用 Flexbox，因此行中的列应该已经相互匹配高度。然后您可以使用 Bootstrap 4 的 Flexbox utility classes将列的内容垂直居中:class="d-flex align-items-center"。例如:

<div class="row">
  <div class="col d-flex align-items-center">Centered Content</div>
  <div class="col">
    <ul>
      <li>Longer</li>
      <li>Multi</li>
      <li>Line</li>
      <li>Content</li>
    </ul>
  </div>
</div>

Codepen

如果您使用的是 Bootstrap 3，您将不得不添加适当的 flexbox 代码来使您的列在高度上匹配并使您的内容垂直居中。这是我发现有助于构建 flexbox 布局的小备忘单:http://jonibologna.com/flexbox-cheatsheet/

编辑:这是与 Bootstrap 3 相同的示例:

HTML:

<div class="row row-flex">
  <div class="col-md-6 col-v-centered">Centered Content</div>
  <div class="col-md-6">
    <ul>
      <li>Longer</li>
      <li>Multi</li>
      <li>Line</li>
      <li>Content</li>
    </ul>
  </div>
</div>

CSS:

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

Codepen