Question

我想在div中垂直对齐文本

display:table-cell;
vertical-align: middle;

文本正在对齐，但div（宽度为100％）的宽度变小。问题是什么？有垂直对齐的其他好方法吗？

编辑：更多HTML代码

 <div style="position:absolute;top:40%;left:0%;">
  <div id="posts" style="position:relative;">
    <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
   <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
  </div>
</div>

Answer 1

显示为table-cell而没有明确显示为table的任何父级的元素将创建自己的 shadowy 父级，并将其显示为{{1 }}）。在DOM中无处可见，但它仍然有效。

默认的表格布局算法为table-row，您需要table-layout: auto：以前的布局算法会根据您的内容调整单元格的尺寸;后者将尊重作者（你）所说的宽度。您可以通过在1“单元格”中包含非常少的内容然后使用非常长的多行内容来进行测试。

table-layout: fixed

你还应该删除或调整单元格的宽度：总数应该是100％，否则它将在大多数浏览器上成比例（Safari存在风险。也许不是Saf 8但至少6个......）

Answer 2

我已更新您的代码以使其正常工作：

<div style="position:absolute;top:40%;left:0%;width:100%;">
  <div id="posts "style="position:relative;width:100%;">
    <div style="display:table; width:100%;">
     <div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em;text-align:center;">test

   </div>
  </div>
</div>

你需要的是添加一个带显示表的div并将所有包含的元素设置为100％宽度。你所居中的div也需要一个text-align：center。

display：table-cell无法正常工作，宽度为100％

2 个答案: