0

我一直在尝试在固定高度和宽度的 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 行。

谢谢，查理

4

5 回答 5

1

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

于 2012-08-22T03:14:13.863 回答
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;
}​

演示

于 2012-08-22T03:55:35.343 回答
0

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

例如替换

margin: 0 auto

和

margin-top: 10%;
margin-left: 20%;
于 2012-08-21T17:49:17.997 回答
0

如果你想让一个 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，这样您就可以了。

于 2012-08-21T18:12:23.953 回答
0

这是一种“以未知为中心”的方法，我觉得这很有趣：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/ ​</p>

于 2012-08-22T03:54:59.237 回答