Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Selectors Class and ID Selectors

Laura Hill
Laura Hill
13,674 Points
Posted by Laura Hill
Laura Hill
13,674 Points

alignment

Sorry whats the difference between text-align: center; and margin: auto;

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Laura,

text-align: center is used for centering inline content within a parent block level element.

So if you have <h1>This is my heading</h1> and then apply text-align: center; to that h1 then the text inside of it will be centered on the page.

margin: auto; or margin: 0 auto is used to center block level elements that have a defined width.

So for example, if you have a paragraph and give it a width of 200px and then apply margin: 0 auto; to it it will be centered horizontally on the page.

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Jason, Thank you for this answer. So, margin: auto or margin: 0 auto will center a block level element, while text-align: center will center the text within it yeah? Thats logical. I caught it in passing in one of the videos, thought they might be interchangeable. No. I traveled and then sick baby, so I'm sorry for the long delay but appreciate the answer very much! Thank you! L

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Laura,

This page has a little info on it if you'd like to read more: text-align

The name text-align is a little misleading because it implies you're aligning text but it's really for aligning inline content. Text is an example and the most common but you can also align an inline image with this property. Or you could center a span with it.