Question

我感到疯狂。这是如何垂直居中某些文字的JsFiddle with a working solution。它来自this SO question。

但即使我将HTML和CSS复制并粘贴到我的本地文件中，我也无法复制。这是我的代码：

这是我的HTML和CSS：

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='main.css'>
    </head>
    <body>
        <div>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </body>
</html>

和

div {
    border: 1px solid black;
    width: 250px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;      
}

这不起作用。 Here is a screenshot 。世界上到底发生了什么？

Answer 1

您必须指定您的DOCTYPE。如果将其添加到HTML文件的顶部，它将起作用。这会导致您的网页成为HTML5，而不是我认为是过渡性的。

<!DOCTYPE html>

使用左侧小提琴选项中的DTD部分愚弄，您可以重现非居中版本。

HTML / CSS：为什么我的文字没有垂直对齐？

1 个答案: