I have this paragraph which I decreased the width of so a part of its text appears in a new line. How do I center the text in the new line?

I have tried using the <center> tag, but it messed up my paragraph by shoving all the text in the previous line to the corner. I considered using the html space entity ( ), but there must be a better way. Here's my code:

<div class="CTA-disclaimer">
      <p>After your free trial, the yearly subscription is $69.99 and automatically 
      renews each year  until <!-- New line, to be centered -->
cancelled. <a href="">Terms</a> | <a href="">Cancel anytime</a>
      </p>
     </div>

CSS:

.CTA-disclaimer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.CTA-disclaimer p{
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 500;
    width: 500px;
}

I have this paragraph which I decreased the width of so a part of its text appears in a new line. How do I center the text in the new line?

I have tried using the <center> tag, but it messed up my paragraph by shoving all the text in the previous line to the corner. I considered using the html space entity ( ), but there must be a better way. Here's my code:

<div class="CTA-disclaimer">
      <p>After your free trial, the yearly subscription is $69.99 and automatically 
      renews each year  until <!-- New line, to be centered -->
cancelled. <a href="">Terms</a> | <a href="">Cancel anytime</a>
      </p>
     </div>

CSS:

.CTA-disclaimer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.CTA-disclaimer p{
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 500;
    width: 500px;
}

• html
• css
• centering

• 3 <center> is a deprecated/obsolete element and should no longer be used. – Paulie_D Commented Feb 6 at 13:26
• Oh, didn't know that. Thank you for the info! – Adam 10k Commented Feb 6 at 13:28
• 1 If you don't want to apply text-align: center to the whole paragraph (which will move the text in the first line a little bit as well), then stick the "new line" content into a span, and applydisplay: block; text-align: center to that. – C3roe Commented Feb 6 at 13:30
• 1 It works! Thank you. – Adam 10k Commented Feb 6 at 13:36

1 Answer 1

What I believe you are asking for is text-align-last

The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.

.CTA-disclaimer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.CTA-disclaimer p {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  width: 500px;
  border: 1px solid grey;
  text-align-last: center;
}

<div class="CTA-disclaimer">
  <p>After your free trial, the yearly subscription is $69.99 and automatically
    renews each year until cancelled. <a href="">Terms</a> | <a href="">Cancel anytime</a>
  </p>
</div>