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 Murphy
Paul Murphy
6,162 Points

Aligning images centrally


I have a nav containing 5 images. I want to display them all centrally no matter the size of the viewport. The images are all displayed inline-block and have some padding and margin styling.

How can I ensure that the images appear centrally all of the time?

Hi Paul, do you mean vertically or horizontally centered images or both? Also code of your nav and related css would be very useful.

Paul Murphy
Paul Murphy
6,162 Points

Hi I meant horizontally,

here's where I am so far


1 Answer

It's tricky to all viewport sizes. My best guess is to make width about 20% for all <li> with images and text centered, so they will be centered relative to an outer container and will retain same distance between each other.

.second-nav li {
  margin: 0 auto;
  width: 19%;
  padding: 0;
  text-align: center;

If you want them centered and grouped altogether, you can use margin: 0 auto approach and set to them container exact width, but it wan't work if the viewport is smaller than this width. But you can fix it if you rearrange them in one column after the viewport get this width.

Maybe someone more experienced can propose the best solution.