html - 显示 :table-cell doesn't work properly with 100% width

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 父级显示(和另一个中间设置为 table-row)。它在 DOM 中无处可见，但它仍然有影响。

默认的表格布局算法是 table-layout: auto 而你想要 table-layout: fixed:以前的布局算法会根据你的内容调整单元格的尺寸；后者会尊重作者(你)所说的宽度。您可以通过在 1 个“单元格”中包含非常少的内容然后是非常长的多行内容来进行测试。

#posts {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
}

您还应该删除或调整单元格的宽度:总计应该是 100%，否则它在大多数浏览器上会成比例(Safari 有风险。可能不是 Saf 8，但至少是 6...)