margin:auto, why does it work only sometimes?

[Green_Tea]

Hi,

 

I realized that margin:auto only works sometimes for me in centering an item. Other times, it does nothing. Margin:auto especially doesn't work for me a lot when I try to center texts in <p> </p>. But in those times that it doesn't work, I can still use margin-left, margin-top, etc. 

 

Are there certain cases where margin:auto doesn't work? Or, are there only specific cases where it works? 

 

Best,

GreenTea

[chriscloyd]

Well first off if you are trying to center an element with css you want to do margin: 0px auto; that will center it horizontally.

[Zane]

In order for margin: 0 auto to work, that specific element needs a width.

[kicken]

Also margin: 0 auto is for centering a block-level element, such as a <div> or a <p>. If you want to center text (or an inline element) within it's block, then you use text-align: center; to accomplish that.

 

Eg:

<p style="border: 1px solid black; width: 50%; margin: 0px auto;">This is left-aligned text inside a centered half-width paragraph.</p>

<p style="border: 1px solid black; text-align: center;">This is center-aligned text inside a full-width paragraph.</p>