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

我在display: table div内有display: table-cell div。有什么办法来限制身高吗？我试过设置高度，最大高度和溢出：隐藏，但它没有效果。（height不设置最低高度，但其他人似乎什么也不做。在http://jsbin.com/gajaka/1/edit CSS“table-cell”样式元素：最大高度（和溢出：隐藏）

<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 */ 
}

来源

2014-10-08 mahemoff

'表cell' =>让元件表现得像一个''元件 – AvrilAlejandro 2014-10-08 17:08:49

见例至于我可以用这个代码中看到，它看起来你使用的是表格单元格显示，以便垂直对齐文本，但是表格单元格带有内在的折衷，你失去了对y维度的控制;也就是说，表格单元格将忽略所有的高度参数，如你已经看到了，

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

新输出：http://css-tricks.com/centering-in-the-unknown/

来源

2014-10-08 17:46:03

：“定心在未知”，描述上面的垂直居中技术http://jsbin.com/faqadumasado/1/edit?html,css,output

第谢谢，我确实希望确认高度在这里被忽略，也没有意识到'display：table'在没有'display：table-cell'子代的情况下会有任何用处。 – mahemoff 2014-10-09 13:57:05

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

回答

相关问题