Why did I have to set .footer-background to display: flex to center the .copyright-text? Why wouldn't setting display: flex to .footer work?

.footer-background {
  background-color: #00008B;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-text {
  color: #fff;
}

.container {
max-width: 1200px;
padding: 0 48px;
margin: 0 auto;
}

<div class="footer-background">
  <footer class="container footer">
    <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
  </footer>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can also set the display: flex; on footer, when you will set the flex on .footer-background, flexibility will apply on footer element

Because when you apply flex on any element, its direct children will be effect, it doesn't matter that what is the content inside the children element

CodePudding user response：

If you have to set .footer-background to display: flex or setting .footer work to display: flex. in both cases the text in .copyright-text will be centered.

<div class="footer-background">
      <footer class="container footer">
        <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
      </footer>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

But instead of assigning

.footer {
  height: 50px;
  display:flex;
  align-items:center;
  justify-content: center;
}

.copyright-text {
  color: #f9faf8;
} 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

you can simply assign the property of text-align:center; and it will centralize the text.

.footer {
  height: 50px;
  text-align: center;
}

.copyright-text {
  color: #f9faf8;
}

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can achieve what you want by setting display:flex on the footer

.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-text {
  color: #000000;
}

<div>
  <footer class="footer">
    <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
  </footer>
</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>