我正在尝试使用本文中概述的方法将文本在 div 中垂直居中:http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>
JSFiddle 在这里:http://jsfiddle.net/Vc88w/2/
div 不得超过指定的 60px 高度,并且应隐藏任何溢出的文本。当没有足够的文本使 div 溢出时,CSS 表格技巧可以正常工作,但当文本太多时,它会强制 div 大于 60px(第一个示例),这不是我想要的。
是否有除了 height 和 max-height 之外的 CSS 规则可以让我覆盖 CSS 表格的高度?或者,在容器 div 上强制最大高度为 60px 的同时,我还能如何实现垂直居中?
最佳答案
是的,您必须在“.container”中将“display:table”更改为“display:block”
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
关于css - 如何设置CSS表格的最大高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10350895/