Question

我认为这是一个非常有趣的问题。每当我尝试垂直对齐我需要的所有元素时 - 它将无法工作，但如果我留下一个，它似乎工作。这是代码：

<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>

我想知道是什么导致了这个问题，我该如何解决它并垂直对齐数据持有者div中的所有元素。

这是问题的jsFiddle。

Answer 1

vertical-align仅适用于文字。我通常使用margin / padding进行垂直对齐。并将您的代码添加到游乐场。

Answer 2

我认为您缺少的关键想法是您需要在data_holder中设置line-height。这就是vertical-align的工作原理。（您需要使用200px而不是100％的高度。）请参阅此问题以获取更好的信息：

How do I vertically center text with CSS?

CSS垂直对齐不起作用

2 个答案: