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
Shaun Kelly
35,560 PointsHow 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?
6 Answers
Scott Moore
4,050 Pointstext-align:center; in your css. Edit: I misread, you meant vertical like completely smack dab in the middle no what size it is?
Gary Stewart
14,142 PointsThere 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.
Scott Moore
4,050 PointsHey 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/
Shaun Kelly
35,560 PointsI do not want the text in the center of the div. I want the text on the left in the middle
Brandon Kidd
18,141 PointsI 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.
Scott Moore
4,050 Pointshttp://codepen.io/freightguy/pen/KbufJ
Shows the text on the left in the logo. Hope it helps.
Jovanny Elias
16,204 PointsHere is a blog I have read before that helped me out with this issue.
http://www.vanseodesign.com/css/vertical-centering/
Hope this helps
Jovanny Elias
16,204 PointsAnother simple way to do this is using flex box. However this is not compatible with any of the older browsers.
Shaun Kelly
35,560 PointsShaun Kelly
35,560 PointsI 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.