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

CSS

Posted by Tim McMillan
Tim McMillan
10,191 Points

Best way to vertically align images when using all uppercase letters

Hey guys,

Checking to see if anyone else has had issues centering an image vertically when using all caps. I believe vertical align is working correctly, however, its taking into account the fact that there could be a lower case g, y, p etc.

Here is a fiddle: http://codepen.io/anon/pen/uIdgJ

Even without using all caps it still looks off center if you start the text with a capital. Infact only if you start the text off with a g, y, p or q does the image actually look centered.

1 Answer

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The best way to vertically center stuff is to use display: table-cell with vertical-align: middle;.

Here's how I'd do it: http://codepen.io/jamesbarnett/pen/CyeLp

Tim McMillan
Tim McMillan
10,191 Points

James thank you for your response.

Looking at your example I can see the image is vertically aligned to the div, but not to the text. In this is example how would you also properly center the text?

I found out that you can use a pixel value with vertical-align. So I came up with this: http://codepen.io/anon/pen/uIdgJ

The image is nicely centered to the text, however if I put a border around the text you can see both are not vertically centered.