所以我在<li>和<ul>标记内部的文本对齐有问题，它们的父标记是<div>标记。由于vertical-align: middle不工作，我无法将文本移动到页面中间，另一方面，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创建下标和上标。因此，它会置换行内的元素。
如果你仔细想想，你会发现，如果你的线路不够高，middle什么都不会做。
在CSS样式中，应该将line-height: 200px;添加到容器中。这应该不是问题，因为您已经将height定义为200px。
这增加了线条的高度，因此vertical-align: middle可以有更多的空间来实际居中放置项目。
老实说，这些天你应该使用flex来实现同样的效果。
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>