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
Jon Edwards
7,913 PointsHow 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
28,793 PointsIf 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.
Laura Hill
13,674 PointsHi Jon,
try this img {
display: block;
margin-right: auto;
margin-left: auto;
}
Laura Hill
13,674 PointsI used "img" selector but obviously you will target whatever class or element your log is in the markup. Let me know if that works!
selamawit mesfin
7,567 Pointsalso helpful: .logo { display: block; }
Jon Edwards
7,913 PointsJon Edwards
7,913 PointsThanks 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
28,793 PointsRichmond Lauman
28,793 PointsIf 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.