Question

I’ve been trying to get a block of text centered horizontally and vertically within a div of fixed height and width. I also want the text to have a semi transparent black background on it, and for it to be able to stretch onto 2 lines if possible.

The problem I’m having is that the line is not being centered vertically, and the black background behind the text is doing strange things on the beginning of the new line.

The code I’ve currently got is this:

HTML

<div class="description">
    <span>Welcome to the world of beautiful design, technology and music.</span>
</div>

CSS

div.description {
    width: 645px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}
div.description span {
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 60px;
    padding: 10px;
}

I’m looking to imitate this kind of look http://grab.by/fwNe without having to use any strange javascript hacks to break it into 2 lines.

Thanks,
Charlie

Answer 1

There is a most elegant way, use display:table-cell;

The css would be

div.description {
    width: 645px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    display:table-cell; 
    vertical-align : middle;
}
div.description span {
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 28px;
    line-height: 60px;
    padding: 10px;
}​

DEMO