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 Layout Techniques Display Modes Table Display

Jon Edwards
Jon Edwards
7,913 Points

How to use an image for the main logo? (Table display class, CSS layout techniques course)

I have been trying to follow along by using a real image for the logo during this course, for the most part it is working well. However, I'm fairly certain that the table cell technique doesn't seem to work for centering with the vertical align property, since he is just using a text logo not an image.

Can anyone provide some insight as to how to adjust your technique for this series by using a real image for the logo? Not many logos I assume are solely text, whats the best way to use an image instead?

Thanks.

4 Answers

Richmond Lauman
Richmond Lauman
28,793 Points

If you set the vertical align of the logos parent element to vertical-align: middle; it will align any child elements vertically to the middle including an image.

Jon Edwards
Jon Edwards
7,913 Points

Thanks for the quick reply, doesn't seem to work though. The image seems to stay stuck in the upper left corner. Another strange bug is that on initial page load, the logo is centered in the mobile layout, but when the window resizes big then small again, it stays stuck on the left side. Margin auto won't center it either.

I'm going to try to use the css background img property instead and see how far I get with that.

Richmond Lauman
Richmond Lauman
28,793 Points

If your logo is a background image for the cell, then vertical-align: middle would not work. Why not use an image element in the cell instead? Then you can wrap it in an anchor tag and link it to the homepage. It would also make it easier to select for styling.

Laura Hill
Laura Hill
13,674 Points

Hi Jon, try this img { display: block; margin-right: auto; margin-left: auto; }

Laura Hill
Laura Hill
13,674 Points

I used "img" selector but obviously you will target whatever class or element your log is in the markup. Let me know if that works!

also helpful: .logo { display: block; }