Question

我一直在尝试在固定高度和宽度的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黑客将它分成2行。

谢谢，查理

Answer 1

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

Answer 2

有一种最优雅的方式，使用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

Answer 3

您可以在窗口的高度和宽度（以div.description为单位）中以百分比值的形式指定margin-top和margin-left。

E.g。替换

margin: 0 auto

与

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

Answer 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，你就是金色。

Answer 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/

CSS以内嵌元素为背景颜色

5 个答案: