html - CSS 居中具有背景颜色的内联元素

Question

我一直在尝试让一段文本在固定高度和宽度的 div 中水平和垂直居中。我还希望文本上有一个半透明的黑色背景，并且如果可能的话，它能够拉伸(stretch)到 2 行。

我遇到的问题是该行没有垂直居中，文本后面的黑色背景在新行的开头做了一些奇怪的事情。

我目前得到的代码是这样的:

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;
}

我想模仿这种造型 http://grab.by/fwNe无需使用任何奇怪的 javascript hack 将其分成两行。

谢谢， 查理

Answer 1

有一个最优雅的方法，使用display:table-cell;

CSS 应该是

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