Hey guys, how come when I set the width of a content it wont respond to align anymore?

Question

I set the width of the paragraphs 200px, so the borders fit more nicely and they are not stretched out on the whole page. however when I did that the paragraphs aligned themselves to the left of the page and didn't remain in the center.
https://code.sololearn.com/WRuuZ3c8Ig7a/?ref=app

Answer 1

I don't see anywhere in your CSS where you centered the paragraphs. What I do see is where you centered the text within the paragraphs.

Try adding
margin: 20px auto; to your paragraphs to see the difference.

Answer 2

if you directly want to align it to the center
use:
position:absolute;
left:20-30px it's your choice
The align attribute is kinda depreciated

Answer 3

Use margins maybe or paddings

Answer 4

A margin kinda did help thx. On the other hand it still looks a bit weird. Maybe it is just the app.

I don't get why cannot you set the width of a content without moving it.

Answer 5

text-align operates on the child node of the paragraph, which in this case is the text. There are several ways to center horizontally or vertically and the method that you use usually depends on the surrounding elements of the page and their structure. Since in the case of your page the elements are stacked vertically you can use their margin to center them.

margin: 20px auto; will apply a 20px margin to the top and bottom of the paragraph while auto will take all the remaining available horizontal space and apply half to each side (left/right) of the paragraph.

Answer 6

Hey Dawg, thx the 20px auto margin did work.

Answer 7

how can I center the paragraphs themselves? I was thinking that text-align centers it since the paragraph itself is a text inside the page.