在引导程序中对齐元素[重复]答案

【问题标题】：Align elements in bootstrap [duplicate]在引导程序中对齐元素[重复]
【发布时间】：2018-06-19 23:07:01
【问题描述】：

如何让 fa-icon 和文本在行中垂直对齐（视觉上）

<div class="row first-row">
            <div class="d-inline col-xs-12 col-sm-1 col-md-1">
                <i class="fa fa-camera-retro fa-2x"></i>
            </div>
            <div class="d-inline align-middle col-xs-12 col-sm-6 offset-sm-1 offset-md-0 img-text">In New York</div>
            <div class="d-inline col-sm-2 date-text">17-08-2010</div>
            <div class="media col-sm-8 offset-sm-1">
                <img src="images/innewyork.jpg" class="img-fluid rounded" alt="Responsive image">
            </div>
        </div>

【问题讨论】：

欢迎来到 Stack Overflow，您的问题应包含a Minimal, Complete, and Verifiable example。附带说明一下，这些元素实际上是否必须像您拥有它们一样位于它们自己的列中？似乎没有必要。
任何CSS？你试过什么？
我尝试在文本 div 标签中添加 --style="vertical-align: middle"-- 无济于事

标签： html css twitter-bootstrap

【解决方案1】：

将align-items-center 类添加到您的row。这将导致该行中的列相互垂直对齐；虽然我应该注意到您的 col 细分超过 12 列。

您的代码（列数调整为 12）可能类似于以下内容：

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-1">
      <i class="fa fa-camera-retro fa-2x"></i>
    </div>

    <div class="col-4">
        In New York
    </div>

    <div class="col-4 text-right">
      17-08-2010
    </div>

    <div class="col-3 text-center">
      <img src="images/innewyork.jpg" class="img-fluid rounded" alt="Responsive image">
    </div>
  </div>
</div>

注意：这确实需要 Bootstrap 4。

【讨论】：