CSS以背景颜色居中内联元素答案

【问题标题】：CSS centering an inline element with background colorCSS以背景颜色居中内联元素
【发布时间】：2012-08-21 17:39:34
【问题描述】：

我一直在尝试让一块文本在固定高度和宽度的 div 内水平和垂直居中。我还希望文本有一个半透明的黑色背景，如果可能的话，它能够延伸到 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 将其分成 2 行。

谢谢，查理

【问题讨论】：

标签： html css text inline

【解决方案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

【讨论】：

谢谢，但你知道是否有办法解决元素分成两行时缺少填充的问题。

【解决方案2】：

您还可以使用（或模仿）表格来允许使用vertical-align: middle;。 http://jsfiddle.net/LcBbc/

【讨论】：

【解决方案3】：

您可以在 div.description 中根据窗口高度和宽度的百分比值来指定 margin-top 和 margin-left。

例如替换

margin: 0 auto

与

margin-top: 10%;
margin-left: 20%;

【讨论】：

【解决方案4】：

如果你想让一个 div 垂直和水平居中，最好的方法是在 CSS 中使用绝对定位：

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

然后是 CSS

.description_container {
    position: relative;
} 
.description {
    width: 640px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -320px; /* half the width of this div */
    margin-top: -100px; /* half the height of this div */
}

现在我们已经创建了一个具有固定宽度和高度的 div，并将其垂直和水平放置。

但是，您希望能够换行超过 1 行，因此，我们不知道 div 的高度是多少。我会使用 JS 来查找 div 的高度，然后相应地更改 CSS 中的值，我不知道如何仅使用 CSS 来做到这一点 - 看看会告诉你。

至于背景，我觉得最好用一个半透明的png那个平铺。我发现它的兼容性比直接在 CSS 中要广泛得多（IE6 是唯一不接受它的浏览器）。因此，最好在 Photoshop 中创建一个 5 x 5px 的图像，具有您想要的任何透明度，并将其导出为 PNG-64，这样您就可以了。

【讨论】：

【解决方案5】：

这是一种我觉得非常有趣的“以未知为中心”的方法：http://jsfiddle.net/joplomacedo/ag5ea/

HTML：

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

CSS：

.description {
    width: 645px; height: 200px;
    margin: 0 auto;
    text-align: center;
}

.description:before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -0.25em;
    vertical-align: middle;
}

.description span {
    display: inline-block;
    vertical-align: middle;
}

我希望我自己想出了这种技术，但实际上我是在 css-tricks.com 上发现的。这是那个链接：http://css-tricks.com/centering-in-the-unknown/

【讨论】：