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
Paul Miller
1,277 PointsWas the code to center the image within the light box ever discussed?
I noticed in the instructor's version, the image was centered on the screen within the lightbox. I don't recall adding that code was ever discussed. Was a video missing?
2 Answers
Allan Parker
7,748 PointsAndrew goes over the CSS for centering the overlayed images in Perform: Part 3. It starts at around the 4:45 minute mark.
Eduardo Velasquez
15,697 PointsI also found that you can center an object like an image using auto margins on the left and right
overlay {
margin: 0 auto;
}
This will also set the top and bottom margins to zero, but you could also use margin-right & margin-left
Thomas A. 'Andy' Wager
17,980 Pointsgood catch. I forgot to mention that :)
Thomas A. 'Andy' Wager
17,980 PointsThomas A. 'Andy' Wager
17,980 PointsInside a div, like the overlay you appended, many elements can be manipulated using the "text-align" property in your CSS, not JUST text like the name implies.
As long as your CSS has this line in it, and assuming your div has the ID overlay, almost everything (unless it's positioned relative or absolute) will be centered.
overlay {
text-align: center;}