Search code examples
htmlcssbootstrap-4flexbox

Why do my p elements not center align-center with boostrap flexbox properties?

This is the code I'm concerned with:

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

If you comment out the divs and try it out with the p tags, the align-items center class does not work. Why does the class work with the div's but not the p elements?

Solution

  • Just remove margins for <p>.

    Fiddle