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!

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

Paul Murphy
Paul Murphy
6,162 Points
Posted by Paul Murphy
Paul Murphy
6,162 Points

Aligning images centrally

Hi,

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?

ixrevo
ixrevo
32,051 Points

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

Hi I meant horizontally,

here's where I am so far

http://codepen.io/paul-masteel/pen/hcajq

1 Answer

ixrevo
ixrevo
32,051 Points

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.