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

How do i make the text vertically central so it is in the middle of the div?

I have tried "vertical-align: middle;" and this hasn't worked. any suggestions?

I have tried text-align: center but this puts the text smack bang in the middle of the div. this is not what i want to achieve. I want the text on the left in the middle of the div.

6 Answers

text-align:center; in your css. Edit: I misread, you meant vertical like completely smack dab in the middle no what size it is?

There is no vertical align for CSS, you may be getting confused with the horizontal-align call?

To align text to the center of a div you can use the following CSS:

text-align:center;  

Hope that helps.

Hey Shaun, had to back through my notes. Here's a quick code pen that may help. http://codepen.io/freightguy/pen/pjAhg

Also this was mock up I made while doing some training. It shows the vertical align feature. Check the developer tools to see how it was used. GL http://codepen.io/freightguy/details/AtdJC/

I do not want the text in the center of the div. I want the text on the left in the middle

I recently found this writeup "Vertical align anything with just 3 lines of CSS", which may be useful - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

I have yet to mess around with it, so please let me know if it works in you situation.

http://codepen.io/freightguy/pen/KbufJ

Shows the text on the left in the logo. Hope it helps.

Here is a blog I have read before that helped me out with this issue.

http://www.vanseodesign.com/css/vertical-centering/

Hope this helps

Another simple way to do this is using flex box. However this is not compatible with any of the older browsers.