Как установить максимальную высоту таблиц CSS?

Question

Я пытаюсь вертикально центр текста в 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/

ДИВ не должен идти больше указанная высота 60 пикселей, и любой переполняющий текст должен быть скрыт. Трюк таблицы CSS отлично работает, когда текста недостаточно, чтобы сделать переполнение div, но когда его слишком много, он заставляет div идти больше 60 пикселей (первый пример), чего я не хочу.

Есть ли правило CSS помимо высоты и максимальной высоты, что позволяет мне переопределить высоту таблицы CSS? В качестве альтернативы, как еще можно достичь вертикального центрирования при одновременном обеспечении максимальной высоты 60 пикселей на контейнере div?

Answer 1

да вы должны изменить в «.container» „дисплей: стол“ с „дисплеем: блок“

.container { 
width: 160px; 
margin: 80px auto; 
padding: 5px; 
height: 60px; 
max-height: 60px; 
border: 1px solid #000; 
overflow: hidden; 
display: block; 
}