如何实现段落内新换行文本的居中对齐？

问题说明 #

给段落设置固定宽度后文本自动换行，希望换行后的那行文本居中。尝试<center>标签导致前一行被挤到角落，不想用HTML空格实体，寻求更优方案。

原有代码 #

HTML代码

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

优化方案 #

不用<center>标签或空格实体，通过CSS结合行内元素即可实现需求：

1. 修改HTML，把需要居中的换行内容用<span>包裹并添加类名：

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

2. 在CSS中新增样式，让包裹内容以块级元素显示并居中：

.CTA-disclaimer p .centered-text {
  display: block;
  text-align: center;
}

设置完成后，第一段文本保持左对齐，被<span>包裹的内容会自动换行并居中，不会干扰前一行布局。

内容的提问来源于stack exchange，提问作者Adam 10k