如何使段落的第二行居中？

Question

我需要帮助将我的段落的第二行居中。 我不知道该怎么做，因为我是 HTML 和 CSS 的新手，但我确实尝试创建两个“p”并给第二个“text-align:center”，但是它离第一行太远了，我觉得必须有更好的方法来实现我想要的。

这是 HTML 表：

 .p_music2 { color: #000; font-family: "PT Sans Narrow", sans-serif; font-size: 2rem; margin: 2.5rem 6rem; }

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

Answer 1

将要居中的文本包裹在<span></span>中，然后将该跨度设置为display: block; text-align: center; display: block; text-align: center; .

display: block; 将导致该代码块脱离句子的 rest 流，并允许您将其居中。

 .p_music2 { color: #fff; font-family: "PT Sans Narrow", sans-serif; font-size: 2rem; margin: 2.5rem 6rem; background: #000; }.p_music2 span { display: block; text-align: center; }

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

Answer 2

我建议创建一个具有属性text-align:center的父<div>元素 class 并在该元素内添加具有相应文本的<p> HTML 元素。 然后分别设置这两个元素的 styles 属性，一个用于父music2 ，另一个用于所有<p>元素，这样您就可以控制<p>元素的边距。

 html{background:blue; color: #fff;font-family: "PT Sans Narrow", sans-serif;font-size: 2rem;padding:50px;}.music2 { text-align:center; }.music2 p{ margin: 0px; }

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