logo标签列表

HTML/CSS: 为什么我的文本无法垂直对齐？

htmlcss
4
我感到很困惑。以下是一个可行的解决方案，可以垂直居中一些文本的JsFiddle示例。它来自于这个stackoverflow问题。
但是，即使我将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;      
}

这不起作用。 这里有一张截图。到底是怎么回事？

你必须在父元素上使用 display:table;，并在子元素上使用 display:table-cell;，否则它不会起作用，这是某种 CSS 缺陷。 - Szymon
它对我来说很好用，在IE11中。我看到它居中了。 - Lance
我在Chrome中也能正常看到它。 - Lance
1个回答
5

您需要指定文档类型。如果您将此添加到HTML文件的顶部，它将起作用。这将使您的页面成为HTML5而不是过渡状态。

<!DOCTYPE html>

在左侧的Fiddle选项中调整DTD部分，您可以重现非居中版本。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接