0

この記事で説明されている方法を使用して、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/

The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.

Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?

4

1 に答える 1

1

はい、「。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;
}
于 2012-04-27T13:08:22.657 に答える