verticaly center align the text in a div

Question

I have a div named "product-name" with 30px height & 11px font-size, It suppose to contain the product name. If a product name is dual line it seems fine but if the product name is single line it starts from the top of the layer, I actually want it become vertically center align.

please let me know if there is any css property or trick

score 3 · Accepted Answer · answered Sep 15 '11 at 16:20

3

Example: http://jsfiddle.net/JGGQg/

Here's a trick i've used:

display: table-cell; 
vertical-align: middle;

answered Sep 15 '11 at 16:20

Joe

80,724
18
127
145

honestly curious about the downvote? I'm not a css expert, is this a bad approach? – Joe Sep 15 '11 at 16:45
when I arrived you were at a -1 as was the question. I'd chalk it up to "just some random ass". Great answer, I've even deleted mine. Very clever approach. Have you tested this across the board? Are there any issues with this in any specific browser version/platform? – Yevgeny Simkin Sep 15 '11 at 16:55
@Dr. Dredel, I believe IE 7 doesn't support the display, but IE8 and every other browser supports it. – Joe Sep 15 '11 at 16:57

score 0 · Answer 2 · answered Sep 15 '11 at 16:31

0

The trick, I would use a table to vertical align. By default a table comes with that property, and it works for most browsers.

D,

answered Sep 15 '11 at 16:31

dtrejogo

241
1
6
18

score 0 · Answer 3 · answered Sep 15 '11 at 16:31

0

Set the line-height property to be the same as the height and then set vertical-align to middle.

line-height:30px;
vertical-align:middle;

answered Sep 15 '11 at 16:31

Victor

4,989
6
31
47

verticaly center align the text in a div

3 Answers3

Linked