[SOLVED] Center same-paragraph text in a new line

Center same-paragraph text in a new line

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

Solution

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>