0

我试图将一个 div 垂直居中在另一个 div 中，无论两个 div 的大小如何

我正在这样做：

<div id='outer_div'>
    <div id='inner_div'></div>
</div>

CSS：

#outer_div {
   display: table-row; 
   height: 200px; 
   width: 200px
}

#inner_div {
   display: table-cell; 
   vertical-align: middle;
   height: 500px; 
   width: 500px
}

我故意为内部 div 设置了更大的尺寸。发生的情况是，即使我设置了 的宽度，由于的宽度（这就是我想要的）1000px，宽度的inner_div上限也是如此。200pxouter_div

但是对于高度，它没有上限，我希望它上限为外部 div 的高度。

我想要的是inner_div保持与 相同的大小outer_div，无论我outer_div在 CSS 中给出什么高度。我基本上希望它的大小与其 parent 相同。

编辑：

我只将文本放在那些 div 中。因此，假设我有一个外部 div 200px*200px(它有display: table-row)，内部 div 由 CSS 定义为500px*500px，内部有虚拟文本。我的预期结果是将内部 div 缩小到200px*200px. 它被外部 div 成功地“缩小”了宽度，但不是高度。我想要的是让它的高度也缩小（所以内部 div 会自动调整，以防我改变外部 div 的高度）

我该怎么做？

4

2 回答 2

0

那会为你做吗？不过不知道你的局限性。

HTML：

<div id="container">
  <div id='outer_div'>
      <div id='inner_div'></div>
  </div>
</div>

CSS：

#container
{
   display: block;
   height: 200px;
   width: 200px;
   /* overflow: scroll; */
   overflow: hidden;
   background-color: green;
}

#outer_div {
   display: table-row; 
   height: 200px;
   width: 200px;
   background-color: purple;
}

#inner_div {
   display: table-cell; 
   height: 500px;
   width: 500px;
   background-color: yellow;
}

在 JSBin 中查看

编辑：我不知道你是否可以更改#inner_div，但如果你这样做了 - 那么只需height在其规则内删除......

于 2012-11-10T01:39:37.270 回答
0

只需添加max-height: value与外部 div 的高度相对应的内部 div 的 CSS，以便内部 div 的高度将是“上限”。

于 2012-11-10T01:40:41.983 回答