What's the best practice for centering all text in the Apple, Banana and Carrot divs?

Question

I\'m trying to keep the same styles (summary-description and summary-headline). I would want the divs that include Apple, Banana and Carrot text to all be centered.

I wo

Answer 1

In order to have the all the p selectors centered except the one containing watermelon information, which you want left aligned, you have to have a special identifier for the watermelon paragraphs.

Add
id="watermelon"
to <p class="summary-headline">Watermelon</p> and <p class="summary-description">.

Then change the CSS to

p:not(#watermelon) { text-align:center; }

This will select all p that do not have the id of watermelon and center the text. Since you have .summary-headline and .summary-description as text-align:left, the watermelon will remain left-aligned, while everything else will become centered.

Answer 2

You're missing a definition for rtecenter:

.rtecenter {text-align: center;}

Then make sure to add it to your first block as well:

<p class="summary-headline rtecenter">Apple</p>