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 Carlos Favela
Carlos Favela
5,325 Points

Vertically center text in a div

I'm trying to vertically center text in a div but cannot seem to figure out how. I used text-align to horizontally center it, but vertical-alignment doesn't seem to work.

Does anyone know the proper way to vertically align text?

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Carlos Favela,

Take a look: http://codepen.io/Guilh/pen/ExuLG

I used display: table and display: table-cell with vertical-align: middle to make it happen.

5 Answers

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

Use Guil Hernandez's suggestion, it requires the least amount of code and least amount of hackiness.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It's very tough. There isn't really a great way to do with CSS like there is for center align, that I am aware of anyway. Here is a good description of vertical align. http://css-tricks.com/what-is-vertical-align/

I've seen CSS ways to do this but it seemed rather complicated, almost "hacky". I'm not sure what exactly qualifies as a CSS hack

I had the same problem and currently my favorite way to solve this problem has been to use midway.js. It's very clean, simple to use, minimal markup, and seems to be pretty reliable for the 98% or so that do have javascript enabled.

The plugin can be found at http://shipp.co/midway/

Hope that helps.

Michel Arteta
Michel Arteta
4,207 Points
Michel Arteta
Michel Arteta
4,207 Points

or also check this tutorial... http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Line height. Set it to the height of the div and it'll get it somewhere close, then tweak till it's perfect.

Carlos Favela
Carlos Favela
5,325 Points
Carlos Favela
Carlos Favela
5,325 Points

Thanks a lot for all your guys help!

I will go Guil's route since I can understand it. :-)