为什么我的 p 元素没有使用 boostrap flexbox 属性居中对齐中心？

Question

这是我关心的代码：

<div class="container-fluid d-flex align-items-center justify-content-between" id="footer">
      <div>Copyright 2019<span>&#169;</span></div>
      <div>Back to Top</div>
      <!-- <p>Copyright 2019<span>&#169;</span></p>
      <p>Back to Top</p> -->
    </div>

如果你注释掉div并尝试使用p标签，则align-items中心类不起作用。为什么该类适用于 div 元素而不适用于 p 元素？

Answer 1

只需删除

<p>

的边距即可。

小提琴

Answer 2

Bootstrap 的

p tag

的

margin-bottom

为

1rem;

将

mb-0

添加到 p 标签可能会解决您的问题。

<div class="container-fluid d-flex align-items-center justify-content-between" id="footer">
  <p class="mb-0">Copyright 2019<span>&#169;</span></p>
  <p class="mb-0">Back to Top</p>
</div>