Question

I’m trying to vertically center text in a div using the method outlined in this article : 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 here : 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?

Answer 1

yes you must change in “.container” the “display:table” with a “display:block”

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