Question

如何让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>

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

对齐bootstrap

1 个答案: