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

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>