我们如何在列的中心垂直对齐文本（但保持左对齐）？答案

【问题标题】：How can we align texts vertically (but keep left align) in the center of a column?我们如何在列的中心垂直对齐文本（但保持左对齐）？
【发布时间】：2020-09-21 23:56:36
【问题描述】：

如何对齐位于垂直中心行宽 7/12 的列内的文本（由 <h1> 和 <h3> 组成）？我希望它们左对齐但垂直居中，因为该行的另外 5/12 处有图像。如果有人知道，谢谢！

这是我的html代码：

<hr>
<div class="row detail">
    <div class="col-md-7 detail-texts">
      <h1 class="">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h1>
      <h3 class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</h3>
    </div>
    <div class="col-md-5">
      <img class="img-fluid mx-auto" src="assets/500x500.jpg" alt="grey box"> 
    </div>
  </div>

  <hr>

        <div class="row detail">
          <div class="col-md-7 order-md-2 detail-texts">
            <h1 class="">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h1>
            <h3 class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</h3>
          </div>
          <div class="col-md-5 order-md-1">
            <img class="img-fluid mx-auto" src="assets/500x500.jpg" alt="grey box">   
        </div>
        </div>

        <hr>

这是我的 SCSS 文件：

.detail{padding: 6%;
color:#5a5a5a;

&-texts{padding: 0;}

}
hr{width:88%;}
    
img{width: 500px;
   height: 500px;}

display:flex;
align-items: center;

和

display:flex;
    align-self: center;

在.details-texts 上，它不起作用

编辑：添加 d-flex 和 align-self-center 类有效。有谁知道这与display:flex 方法有何不同？

【问题讨论】：

使用 flexbox css-tricks.com/snippets/css/a-guide-to-flexbox 或者看起来像引导程序，您可以使用它内置在实用程序类中，例如“align-items-center”
这能回答你的问题吗？ Vertical Align Center in Bootstrap 4

标签： css bootstrap-4 sass

【解决方案1】：

您可以使用 flexbox 来执行此操作。

.detail-texts{
    display: flex;
    align-items: center;
}

【讨论】：

这也是我最先尝试的！但它不起作用，我也试过align-self 而不是align-items。我现在正在阅读一些文档，当我找到答案时会发布
检查样式没有被引导程序踩踏......在这种情况下，您可以使用！重要

【解决方案2】：

好的，找到了解决方案：使用row 将d-flex 类添加到我的div 中，并将align-self-center 添加到它内部的div 类中。我不确定这与添加有何不同

display: flex;
align-self: center;

进入 SCSS，因为它应该是同一件事，所以这是我唯一的疑问，谢谢！

【讨论】：