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
Francisco Correa
7,322 PointsCentered image in a navigation bar
I'm trying to do a navigation bar with a image in the center which link to index.html. I don't know if the code that I have so far is well-designed. Any help will be apreciated.
My code:
<nav>
<ul>
<li>History</li>
<li>Porpose</li>
<li><a href="index-html"><img src="img/rey.jpg" alt="" id="logo"></a></li>
<li>Galery</li>
<li>Contact</li>
</ul>
</nav>
3 Answers
Adam Ryde
5,222 PointsHiya mate, If you change the display of the list to inline block within the CSS i guess you could have the image centered. you may have to have a play around with the margins a bit to get it all centered, but when you change to a smaller view port i dont think it will stay in the center. the links either side will move around and you may find it in a top to bottom grid. with it in the center of those? if that makes sense. alternatively, why dont you take the image out of the nav list completely. just have it as an image in the center if your header bar at the top maybe? that way just use margin: 0 auto to center it and have the nav just below it? just an idea.
Francisco Correa
7,322 PointsThank you mate! I applied your ideas and worked out very well
Cheers!
Adam Ryde
5,222 PointsNot a problem buddy glad I could help.