Align text vertically centered- In all IEs

Question

I have a text-control in Div. I want to place the text aligned vertically centered of div.

The div has following styling:

 display: table-cell;
 vertical-align: middle;
 text-align: Left;
 font-size: 14px;
 height: 80px;
 padding: 0 15px 0 15px;
 overflow: hidden;

Problem:

It aligns text as expected in IE8, but fails in IE7 and IE6.

Anyway to fix it, so it works alright in all IEs.

Possible duplicate [http://stackoverflow.com/questions/6679966/vertically-align-text-within-div-element](http://stackoverflow.com/questions/6679966/vertically-align-text-within-div-element) — Morpheus, Jan 09 '13 at 10:18

score 0 · Answer 1 · edited Jan 09 '13 at 10:52

0

use

position:relative top:50% top:-50%

for ie 6/7 , this might be helpful!

edited Jan 09 '13 at 10:52

dekisha

157
3
11

answered Jan 09 '13 at 10:22

sourcecode

1,744
2
14
17

score 0 · Answer 2 · answered Jan 09 '13 at 10:51

0

Add line-height and position to the class

line-height: 80px;
position: absolute;

Finally your CSS looks like:

display: table-cell;
vertical-align: middle;
font-size: 14px;
height: 80px;
padding: 0 15px 0 15px;
overflow: hidden;
border: 1px solid;
line-height: 80px;
position: absolute;

Refer LIVE DEMO

answered Jan 09 '13 at 10:51

Siva Charan

17,624
9
58
94

This doesnot work when my text has line breaks. It doesnot show the text in line breaks. – user1820973 Jan 09 '13 at 11:09

score 0 · Answer 3 · answered Jan 09 '13 at 10:52

0

Try line-height: 80px, I think it will work.

answered Jan 09 '13 at 10:52

dekisha

157
3
11

Doesnot work. Div is supposed to have any number lines possible within specified height. But line-height: 80 shows only one line text. – user1820973 Jan 09 '13 at 11:09

Align text vertically centered- In all IEs

3 Answers3