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

Question

I need help centering the second line of my paragraph. I don't know what to do because I'm new to HTML and CSS but I did try to create two "p" and give the second one a "text-align: center" however it was too far from the first line and I feel like there must be a better way to achieve what I want.

This is the HTML sheet:

 .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

Wrap the text that you want to center in a <span></span> and then set that span to display: block; text-align: center; display: block; text-align: center; .

display: block; will cause that block of code to break out of the flow of the rest of the sentences, and allow you to center it.

 .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

I would recommend to create a parent <div> element class with the property text-align:center and inside that element add your <p> HTML elements with the corresponding text. Then set the styles properties of those two elements separately one for the parent music2 and another for all your <p> elements so you can have control over the margins of the <p> elements.

 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>