CSS Vertical align does not work

Question

I've got what I think to be quite an interesting problem. Whenever I try to vertical-align all the elements I need - it won't work, but if I leave one out, it appears to work. Here's the code:

<body style='margin:0; width:100%; height:100%; background-color:#e8e7e7'>
  <div id='holder' style='width:100%; height:100%; margin:0'>
    <div id='blackout' style='width:100%; height:100%; background-color:#000; opacity:0.5; position:absolute; z-index:1'></div>
    <div id='data_holder' style='width:100%; height:100%; z-index:2; position:relative; text-align:center'>
      <div id='geo' style='width:96.9%; height:40%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
      <div id='dis_v' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
      <div id='dis_d' style='width:24%; height:25%; background-color:#9F6; display:inline-block; '></div>
      <div id='dis_b' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
      <div id='dis_o' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
    </div>  
  </div>
</body>

I would like to know what's causing this problem and how can I solve it and vertical-align all the elements inside the data holder div.

Here's a jsFiddle of the problem.

Hmm... seems to work for me on Firefox 30, what browser are you using? — ced-b, Jul 08 '14 at 21:57
Could you make a JSFiddle for the exact problem? I cannot seem to replicate this. — BuddhistBeast, Jul 08 '14 at 22:30
The elements that have vertical-align. What do you think they are being aligned with? — Alohci, Jul 08 '14 at 23:04
@Alohci Well they should align with their parent element, shouldn't they? — Sidetik, Jul 08 '14 at 23:15
No. They align with the line-box they are in. Which effectively means the other elements inside data_holder. So if they all have vertical-align:middle and are the same height, they'll all form a straight line. Which they do. The height of the parent element plays no part in that alignment. — Alohci, Jul 08 '14 at 23:20

score 0 · Answer 1 · edited Jul 08 '14 at 22:02

0

vertical-align work just for text. I usually use margin/padding for vertical align. And add your code to a playground.

edited Jul 08 '14 at 22:02

faerin

1,915
17
31

answered Jul 08 '14 at 21:59

AleshaOleg

2,171
1
15
29

please don't ever refer to w3schools; afaik valign works for inline parent elements – m02ph3u5 Jul 08 '14 at 22:48

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

I think the key idea that you're missing is that you need to set line-height in data_holder. That's just how vertical-align works. (You'll need to use a height like 200px rather than 100%.) See this question for better info:

How do I vertically center text with CSS?

edited May 23 '17 at 12:20

Community

1
1

answered Jul 09 '14 at 00:06

mdahlman

9,204
4
44
72

Could you please add a jsFiddle? I've tried what you said but couldn't get it to work. – Sidetik Jul 09 '14 at 11:29

CSS Vertical align does not work

2 Answers2