Question 88697 in Html Question posted in
Some basic documentation can be found here.

css several "text-align" declared, which one rules? – Html

Minimal reproducible example:

Hello World

<div class="footer">
  <p>This is a test</p>
</div>

p {
  text-align: justify;
}

.footer {
    background-color: #433E3F;
    color: #bdcad9;
    text-align: center;
}

I have this:
enter image description here

How do I make the text-align: center of the footer class overrule the one defined in the paragraph elements?

If I take off the text-align of the paragraph elements, my footer gets centered obviously, but I want to keep the paragraph elements justified:
enter image description here
So that’s not a solution 🙁

Tags:

2

Answers


  1. 0

    This way:

    .footer p {
    text-align: center;
}

    You could add !important, if needed :

    .footer p {
    text-align: center!important;
}
    Login or Signup to reply.
  2. 0

    It’s because the class="footer" is on the div and not on the p, so it will center text within the div but not text within the p. I would put a class on the specific paragraph that you want to center. For example,

    Hello World

<div class="footer">
  <p class="center-text">This is a test</p>
</div>

    p {
  text-align: justify;
}

.footer {
    background-color: #433E3F;
    color: #bdcad9;
}

.center-text {
  text-align: center;
}

    Or, if you just want all paragraphs within your footer div to be centered:

    <div class="footer">
  <p>This is a test</p>
</div>

    p {
  text-align: justify;
}

.footer p {
    background-color: #433E3F;
    color: #bdcad9;
    text-align: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search