如何实现HTML段落内的第二行文本居中对齐

p标签自带默认的上下外边距，两个相邻p的外边距叠加后就会出现之前遇到的间距过大问题，不需要拆分p标签就能实现需求，无额外间距，兼容性也更好：

方案1：强制换行+span标签控制（推荐） #

修改后的HTML代码 #

<p class="p_music2">
    Upgrade today to get your favorite music, movies, TV shows, and
    podcasts.<br>
    <span class="second-line">You can join youTunes and stream — or download and play
    offline — over 70 million songs, ad‑free.</span>
</p>

新增CSS代码 #

.p_music2 .second-line {
    display: block;
    text-align: center;
}

效果说明 #

• <br> 负责在指定位置强制换行，不会产生额外的上下间距
• span设置display: block后会独占整行，配合text-align: center就能实现第二行居中，和第一行的行间距和普通段落换行完全一致

方案2：保留两个p标签，手动消除间距 #

如果还是想拆分两个p标签，只需要消除第二个p的上外边距即可：

HTML代码 #

<p class="p_music2">
    Upgrade today to get your favorite music, movies, TV shows, and
    podcasts.
</p>
<p class="p_music2 second-p">
    You can join youTunes and stream — or download and play
    offline — over 70 million songs, ad‑free.
</p>

新增CSS代码 #

.p_music2.second-p {
    margin-top: 0;
    text-align: center;
}

内容的提问来源于stack exchange，提问作者João Silva