CSS 테이블의 최대 높이를 설정하는 방법은 무엇입니까?

Question

나는이 문서에서 설명하는 방법을 사용하여 사업부에서 수직으로 중심 텍스트에 노력하고있어 여기 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/

하는 사업부보다 더 큰 가지해야합니다 60px의 지정된 높이 및 넘치는 텍스트는 숨겨야합니다. div 테이블 오버플로를 만들기에 충분한 텍스트가 없을 때 CSS 테이블 트릭이 잘 작동하지만 div가 너무 많으면 div가 60px (첫 번째 예)보다 커야하는데, 이는 내가 원하지 않는 것입니다.

CSS 표의 높이를 무시할 수있는 높이 및 최대 높이 외에 CSS 규칙이 있습니까? 다른 방법으로 컨테이너 div에 최대 높이 60px를 적용하면서 수직 센터링을 어떻게 달성 할 수 있습니까? 로모그래퍼 : "테이블 디스플레이"

Answer 1

예는 ".container"는 변화해야한다 "디스플레이 : 블록"

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