因此， null null和Vertical-Align:Midder不工作，我无法将文本移动到页面中间，另一方面，Text-Align:Center工作正常。我知道这里有一些问题，处理这个问题，但我无法找到答案，解释为什么会发生这种情况。我的问题是:为什么会出现这种情况，如何妥善解决这个问题？如有帮助，不胜感激！下面是我的代码:html, body {
margin: 0;
width: 1500;
height: 1000;
}
.headline {
width: 1500px;
height: 200px;
background-color: cornflowerblue;
display:inline-block;
}
li {
list-style-type: none;
display: inline-block;
font-size: 50px;
}
ul {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
}<div class="headline">
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</div>
对于vertical-align的用意有一些混淆。
它实际上是用于使用CSS创建下标和上标。因此，它会替换一行中的元素。
如果你这么想，你可以看到如果你的线不够高，中间不会做任何事情。
在CSS样式中，应该将line-height:200px；添加到容器中。这应该不是问题，因为您已经将heighth定义为200px。
这会增加线条的高度，因此您的Vertical-Align:Midder可以有更多的空间将项目居中。
老实说，您现在应该使用flex来实现同样的功能。
null
html, body{
margin:0;
width:1500px;
height: 1000px;
}
.headline{
width:1500px;
height:200px;
line-height: 200px;
background-color:cornflowerblue;
display:inline-block;
}
li{
list-style-type: none;
display:inline-block;
font-size:50px;
}
ul{
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title> Positioning </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="headline">
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</div>
</body>
</html>
试试这个
null
html, body{
margin:0;
width:1500;
height: 1000;
}
.headline{
width:1500px;
height:200px;
background-color:cornflowerblue;
display:inline-block;
}
li{
list-style-type: none;
display:inline-block;
font-size:50px;
padding: 70px 0;
}
ul{
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
display : flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html>
<head>
<title> Positioning </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="headline">
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</div>
</body>
</html>