html - 子 div 从父 div 中断。为什么？

Question

我有一个父 div 和一个带有一些文本的子 div。我希望它垂直居中在父 div 中。我似乎无法让孩子在父 div 中垂直居中。为什么它会脱离父 div？

我希望以上是有道理的。我正在尝试上传插图，但显然我需要 10 声望才能发布图片。

Answer 1

检查下面的小提琴：它将文本垂直对齐到 parent 的中间div。

http://jsfiddle.net/Kritika/43VYg/

HTML：

<div class="wrapper">
  <div class="inner">
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
  </div>
</div>

CSS：

.wrapper {
    display: table-cell;
    width: 400px;
    height: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
 
  .inner {
    padding: 10px;
  }

注意：这不支持像 IE 7 这样的旧浏览器。

您可以参考以下链接以使用绝对位置/相对位置对齐文本

使用绝对定位对齐文本