如何垂直居中引导列文本？

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

如果您希望文本显示在第二行下方，则需要创建另一个图像 div 并添加一个类，以便它仅显示在手机上。

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 visible-xs ">
                <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 class="col-xs-12 col-sm-6 col-md-6 col-lg-6 hidden-xs ">
                <div class="box2">
                    <img class="image" src="http://via.placeholder.com/450x450">
                </div>
            </div>

https://jsfiddle.net/7goLo3xy/2/

Answer 2

最简单的方法是使用 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

Answer 3

如果您需要比 CSS 提供的更多控制，您可以使用简单的 jQuery 或 JavaScript 实现。

$(window).resize(function() {//on resize
    setBoxSizes();
});
function setBoxSizes() {
    $('.image').each(function() {
        let $imageBox = $(this).closest('.box2');
        let imageBoxTop = $imageBox.offset().top;
        let $otherBoxes = $imageBox.closest('.row').find('.box2');
        $otherBoxes.each(function(){
            $box = $(this);
            if(!$box.find('.image').length) {//doesn't contain .image
                if(Math.abs($box.offset().top - imageBoxTop) < 3) {//on the same layout row
                    $box.height($imageBox.height());
                }
                else $box.css('height', 'auto');//restores single column layout
            }
        });
    });
}
setBoxSizes();//initial configuration

Fiddle Example! - 处理多列布局，更改列布局，并确保对相等的水平框执行居中。

Answer 4

如果您不想使用 Flexbox，您始终可以将高度设置为 350 像素，然后使用 table 和 table-cell 并将 vertical-align 设置为 middle。

但是，此方法确实将您限制为固定高度，因此，如果图像的高度发生变化，框高度将不是相对的。如果您希望该框是相对的，您始终可以将高度设置为 0 并使用padding-bottom。更多关于这个here

<div class="box2">
            <div class="center">
            <div class="center-v">

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

.center {
    display: table;
    height: 345px;
}

.center-v {
    display: table-cell;
    vertical-align: middle;
}