Question

I want to vertically align text both when the text fits in one line AND when the text fits in two lines. There’s a jsFiddle here.

Suppose my HTML looks like this:

<div class="Container">
   <div class="SomeClass">test text</div>
   <div class="SomeClass">some very very long text</div>  // this text is cut
</div>​

And that my CSS looks like this:

.Container{
    padding:3px 0px 6px 0px;
    height:30px;
    margin:30px 30px;}

.SomeClass{
    height:30px;
    float:left;
    width:100px;
    overflow:hidden;
    border:1px solid black;
    text-align:center;
    font-family:"Trebuchet MS";
    font-weight:bold;
    font-size:13px;
    line-height:28px;}​

At the moment, I’m using the line-height property: I set it to the height of the container, and that vertically aligns the text. The problem is that when the text fits in 2 lines, this doesn’t work anymore. Note that the .Container items must be of a certain height/width AND be left with overflow:hidden;

Let me know if you have some suggestions.

Thanks.

Answer 1

First of all I didn’t understood this

Note that the .Container items must be of a certain height AND be left
with overflow:hidden;

If you are giving a fixed height than I am sure it won’t fit 2 lines in there…

And about the answer, you can use display: table-cell, use vertical-align: middle; and remove float: left; from .SomeClass

Demo

CSS (Ofcourse you can play with heights)

.Container{
    padding: 3px 0px 6px 0px;
    margin:30px 30px;
    height: 200px;
}

.SomeClass{
    width:100px;
    height: 200px;
    border:1px solid black;
    text-align:center;
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
}