vertical align to absolute positioned div

Question

div{
    display: table-cell;
    height: 100px;
    background-color: red;
    vertical-align: middle;
    /*position: absolute;*/
}

In the above demo If you remove the comment from position: absolute; the vertical-align won't work.

I also found this question but here is added a parent div. But in my case, I need without touching up markup. Any idea?

position absolute and position fixed dont work with display table cell — Hushme, Jul 23 '13 at 05:12

score 0 · Answer 1 · answered Jul 23 '13 at 05:13

0

here is the refrence for ur detail position: absolute forces display: block, read number two here.

As for a workaround, I think you'll have to wrap it in another element:

answered Jul 23 '13 at 05:13

Hushme

3,108
1
20
26

score 0 · Answer 2 · answered Jul 23 '13 at 05:21

0

Check this fiddle as a workaround..http://jsfiddle.net/DjGQ5/ Change display : block and Wrapped text in p tag with padding-top: 50% property in css

answered Jul 23 '13 at 05:21

Nitin Agrawal

1,341
1
10
19

score 0 · Answer 3 · answered Jul 23 '13 at 05:24

0

Wow! I did it. See this demo

div{
    display: table-cell;
    height: 100px;
    background-color: red;
    vertical-align: middle;
    position: absolute;
}
div:before{content: " "; height: 50%; display: inline-block;}

answered Jul 23 '13 at 05:24

Bhojendra Rauniyar

83,432
35
168
231

if i used to multiple line than result is this http://jsfiddle.net/rohit_azad/tCWr2/3/ – Rohit Azad Malik Jul 23 '13 at 05:29
ur just pushing it by before property add more text it wont center – Hushme Jul 23 '13 at 05:41
anyway, in my case this will be okay. – Bhojendra Rauniyar Jul 23 '13 at 05:45

score 0 · Answer 4 · answered Jul 23 '13 at 12:59

0

Jus make Position:relative Its fine now... Updated the fiddle.. Here is the link..

Demo

answered Jul 23 '13 at 12:59

Guruprasad J Rao

29,410
14
101
200

You didn't notice to the question? It's about absolute position. – Bhojendra Rauniyar Jul 24 '13 at 02:58
I don't need display table cell but position absolute and vertical-align to middle... any idea.... – Bhojendra Rauniyar Jul 24 '13 at 05:57
No buddy.. I tried all the combinations possible.. But I wasnt able to achieve it... Sorry.. :( – Guruprasad J Rao Jul 24 '13 at 08:08

vertical align to absolute positioned div

4 Answers4