垂直对齐a div 在a Bootstrap 4.1 container-fluid > row > col

Question

我正在尝试将 Bootstrap 4.1 的 align-middle 应用到 row 中的 col。但它里面的内容似乎与顶部保持一致。这是我的代码：

<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

这是显示结果的片段：

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex">
  <div class="container-fluid">
    <a class="my-container" href="#">
      <div class="row">
        <div class="col flex-grow-1">
          Line 1<br>Line 2<br>Line 3
        </div>
        <div class="col-auto text-right align-middle">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </a>
  </div>
</body>

如何正确对齐图标？

Answer 1

尝试用 span 包裹你的 i 并让 span 拥有 align-middle class

Answer 2

您可以给 row 一个固定的高度，然后相应地调整您的 col 行高。请看下面的代码：

html:

<div class="container-fluid">
<a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1">
      Line 1<br>Line 2<br>Line 3
    </div>
    <div class="col-auto text-right">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
</a>

css:

.row {
 height: 150px;
}

.col {
 line-height: 50px;
}

如果您的列中只有一行，您可以使列的行高与行高相同。您现在有三行，所以将行高除以三。

Answer 3

您可以在列上使用Bootstrap 4 的my-auto class。这是代码：

html:

<div class="container-fluid">
  <a class="my-container" href="#">
  <div class="row">
    <div class="col flex-grow-1 my-auto">
      <p>line 1</p>
      <p>line 1</p>
      <p>line 1</p>
    </div>
  <div class="col-auto text-right">
  <i class="fas fa-chevron-right"></i>
</div>

css:

p {
  margin: 16px;
}

该段落的底部边距为 1rem，因此您可以删除边距或像我一样只给它一个整体边距。这对我来说很好。

垂直对齐a div 在a Bootstrap 4.1 container-fluid > row > col

Vertically align a div in the middle of a Bootstrap 4.1 container-fluid > row > col

html

css

vertical-alignment

bootstrap-4