HTML/CSS：为什么我的文本不能垂直对齐？

我觉得很疯狂。这里是一个JsFiddle with a working solution如何垂直居中一些文字。这是从this SO question。HTML/CSS：为什么我的文本不能垂直对齐？

但即使我复制并粘贴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 。世界正在发生什么？

来源

2015-05-15 gwg

你必须使用display：table;在父母和显示器上：table-cell;在孩子，否则它不会工作，某种bug css –

它工作正常，因为它对我来说，在IE11。我看到它居中。 – Lance

我在Chrome中看到它也很好。 – Lance

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

<!DOCTYPE html>

在左边的小提琴选项中的DTD部分混淆，您可以重现非中心版本。

来源

2015-05-15 02:47:14 Jonathan

*脸掌*。谢谢。 – gwg

HTML/CSS：为什么我的文本不能垂直对齐？

回答

相关问题