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
Austin McDowell
175 PointsText-Align is not centering
Everything is the exact same as the tutorial video I've watched but I can't get the word "background" to center
3 Answers
Steven Parker
231,248 PointsUsing "text-align: center;" will center the content of an element within the element.
If you need to center the element itself, you may need "margin: auto;" instead.
If that doesn't resolve the issue, please show the code (both HTML and CSS) for a more specific answer.
ddt6fk2hdvuk3ut
13,919 PointsThe “text-align” property only affects inline elements. Block elements need to be centred with “margin: 0 auto” or flexbox/absolute positioning.
Could you share your code?
Steven Parker
231,248 PointsThat's not quite right. You can use "text-align" just fine on block elements like paragraph (p) or div, try it out with your favorite playground or the workspace.
ddt6fk2hdvuk3ut
13,919 PointsYup. In most cases it’s the simplest solution as <p> tags are typically full-width, but using "text-align: center" on a div will not center a block element. It actually aligns the content INSIDE the paragraph. The element itself is not affected.
I’ve illustrated this in a pen: https://codepen.io/anon/pen/ePRQJx
Apologies—that’s the point I was trying to make.
:)
Steven Parker
231,248 PointsAnd the point I was making in my original answer.
ddt6fk2hdvuk3ut
13,919 PointsHaha. Genius!