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

Posted by john larson
john larson
16,594 Points

what would cause text-align center not to work here. codes working fine up to that point.

I've run into this before with text align not centering an img. I know for margin auto to center, height and width need to be set. I don't know if there's some detail like that I'm missing, but the code is working except that one thing.

1 Answer

Michael Hulet
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

text-align: center only works when an element is being displayed as inline or inline-block. The default for an img is inline, and that's why it works so frequently. Here's a quick reference on when to do what:

img{
  /* This is the default */
  display: inline;
  text-align: center;
}

img{
  display: block;
  margin: 0 auto;
}

img{
  /* This covers all your bases, and you can use either. Pick your favorite */
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}
john larson
john larson
16,594 Points

Thanks Michael, I like how you laid that out in an orderly fashion...very nice