Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tom Bedford
Tom Bedford
15,645 Points

CodeShare: A responsive vertically centered image

I've been revamping my portfolio site and wanted to have some images vertically centered alongside sections of text that would scale and maintain aspect ratio as the browser was resized.

I came across a tutorial for vertically centering them (see the 2nd example "CSS + Inline Image"). The idea is to display the image half way down the container and then bring it back up with a negative margin equal to half the height of the image.

So for a vertically centered non-responsive image you have:

img {
   position: absolute;
   top: 50%;
   width: 277px;
   height: 240px;
   margin-top: -120px; /* half the height */
}

However that deals with images where you know the height/width and I was setting my image at 30% of the width of the container with a height of auto. How do you know the height of an image with a % width?

My original image was 277px (width) by 240px (height). As it is displayed with a width of 30% then you can work out a % equivalent for the height by calculating it as a ratio of the width. In this case (277px/30%)*240px = 25.9927797833935%. So half the height would be 12.99638989169675%.

This gave me:

img {
  position: absolute;
  top: 50%;
  width: 30%;
  height: auto;
  margin-top: -12.99639%; /* half the height */
}

I'm sure this is a simple concept but it took a while to "click" in my head so I thought someone else may find it useful.

I've made a codepen demo if you want to see it or play around with the code. Try resizing the browser and see how the image maintains it's aspect ratio and vertical centering. Obviously isn't suited for tiny screens but you could solve that with a media query to put the image above/below the text.

Let me know if you have a better way of achieving this!

2 Answers

James Barnett
James Barnett
39,199 Points

That's pretty impressively clean code :+1:

Samuel Johnson
Samuel Johnson
9,152 Points

I had a problem similar though this but when started implementing various version like this i decided to go with:

img {float:left}

Although this changed a few things and the writing wrapped around the bottom of the image it still looked preety good fro what i wanted because when the screen size got smaller i needed to remove the float property and add centred text-align so the image is nicely aligned above the text making it easier to see on smaller screens.