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

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

How does "text-align: center" property at around 5:42 make the image center? Isn't the text align property for text?

I'm so confuse...

2 Answers

rydavim
rydavim
18,814 Points

The text-align property describes how inline content is aligned inside it's parent element. Text is one example of an inline element, but not the only one. Images have a default display value of inline-block, so you can use text-align to center them.

Margins are the most common way to horizontally center block elements. You can use this technique on images by setting their display value to block.

Hopefully that helps clarify things. Happy coding! :)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

No it can work for any element but as the name suggests its primarily for text. :)

It's more common though to center an image with automatic left and right margins so it's central to it's parent element.

position: relative;
margin: 0 auto;

In the context of jquery it's probably the simplest way to pass CSS through a jQuery method.