具有垂直对齐文本的引导列 [重复]答案

【问题标题】：Bootstrap Columns with vertically aligned text [duplicate]具有垂直对齐文本的引导列 [重复]
【发布时间】：2018-07-18 21:00:11
【问题描述】：

我有 2 个引导程序 col-md-6 列，其中一个包含图像，另一个包含一个带有一段文本的 p 标签。我将如何动态垂直对齐文本，使其与旁边的图像相比完美，代码如下

<div class="col-md-6">
    <img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
    <p>text goes here</p>
</div>

我还需要能够对可能包含 3 个标签的列执行相同的操作，例如一个 h3 p 和一个 a 标签。

【问题讨论】：

bootstrap V3 或 V4 的哪个版本
v3.3.7 抱歉忘记添加了
所以我的建议是升级到 V4 [如下面的回答] 或查看此链接 stackoverflow.com/questions/20547819/…
干杯老兄帮了大忙

标签： html css twitter-bootstrap

【解决方案1】：

如果您使用 V4 的引导程序，您可以简单地依赖一些 class utilities 并使用 align-items-center 来实现：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row align-items-center">
    <div class="col">
      <img class="img-responsive" src="https://lorempixel.com/400/200/">
    </div>
    <div class="col">
      <p>text goes here</p>
    </div>
  </div>
</div>

【讨论】：