Question

我有一个容器div和一个内容div。标记：

<div id="container">
<div id="content">
   <pre>
      some <br/>
      content <br/> of variable height.
   </pre>
</div>
</div>

的CSS：

#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}

#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}

我想垂直对齐内容div，但不要让它占用容器div的完整高度。现在我看到其他的解决方案，那些使用3 div的 - 外部，中间，内部 - 我不想那样做 - 只有2个div。虽然上面的东西工作 - 内容div的高度被忽略 - 可能是因为表格单元格显示值，它填充整个容器div。如何纠正这个？

Answer 1

从#content id css选择器中删除display：table-cell css，然后尊重200高度。并且你的高度有一个拼写错误：200px宽度：200px没有分号将这两个值分开，所以宽度没有得到应用。

#container {
    display:table;
    border:solid red 2px;
    width:400px;
    height:500px;
    background-color:#aaa;
}
#content {
    /*display:table-cell;*/
    height:200px;
    width:200px;
    vertical-align:middle;
    background-color:#444
}

<div id="container">
    <div id="content"> <pre>
      some <br/>
      content <br/> of variable height.
   </pre>

    </div>
</div>

仅使用2个div进行垂直对齐

1 个答案: