Question

我在display: table-cell div中有一个display: table div。有没有办法限制高度？我试过设置高度，最大高度和溢出：隐藏，但它没有效果。（height确定了最小高度，但其他人似乎什么也没做。

上的示例

<div class='table'>
  <div class='cell'>This should be maximum 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

CSS

.table {
  display: table;
  background: green;
  width: 100px;
  height: 100px;
  max-height: 100px; /* ignored */
  overflow: hidden; /* ignored */
}

.cell {
  display: table-cell;
  vertical-align: middle;
  max-height: 100px; /* ignored */  
  text-align: center; /* doesn't work */  
}

Answer 1

据我所知，使用此代码时，您似乎正在使用表格单元格显示以垂直对齐文本。然而，表格单元带有固有的权衡，你失去了对y维度的控制;也就是说，如您所见，表格单元格将忽略所有高度参数。

解决此问题的方法是将display子属性从table-cell更改为inline-block。然后，为了获得垂直居中，我们可以执行以下操作：在.table元素内放置一个伪元素并垂直对齐。垂直对齐需要相对于另一个内联元素，因此这个伪元素为.cell提供了一个垂直对齐的引用。这应该垂直对齐你的文字。

新输出：http://jsbin.com/faqadumasado/1/edit?html,css,output

描述上述垂直居中技术的“居中于未知”的文章：http://css-tricks.com/centering-in-the-unknown/

CSS“table-cell”样式元素：最大高度（和溢出：隐藏）

1 个答案: