为什么文本没有得到中心在里放置的图像时一致？如果删除了IMG的文本被居中。我试图实现两者放在中心。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li>
<span class="text">Home</span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
</li>
<li>
<span class="text">News</span>
</li>
</ul>
</body>
</html>所述text-align属性用于水平地对准元件，而不是垂直。
使用<ul>您display: flex;元素只是更改为Flexbox的，然后使用align-items财产垂直居中<li>项目。同样，改变你的<li>元素的Flexbox的，并使用相同的属性，以垂直居中的文本和图标。
此外，你需要改变你的CSS选择器li hover到li:hover。
检查并运行下面的代码片段上面的一个实际的例子：
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
display: flex;
width: 100%;
height: 50px;
align-items: center;
}
li {color: white;text-decoration: none;
display: flex;
align-items: center;
}
li:hover {background-color: #111;}<ul>
<li>
Home
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
</li>
<li>News</li>
</ul>如果要居中的图像使用：
img{
margin: auto;
}
然后使用文本中心
text-align: center;
有迹象表明，可以实现垂直和水平对齐多种方式。
正如@ AndrewL64解释的，可以使用flex并使用align-items属性center的元素。这是更先进的方法，最推荐的用于创建响应式布局。
您可以设置元素的display属性block和使用margin: 0 auto垂直和水平居中的元素。
或者你也可以设置为display元素或inline-block时，您可以使用inline属性的text-align: center财产。要注意，该酒店只在block容器的内部内容的作用是很重要的，只有影响inline或inline-block元素。
This article by Sarah Cope does well to explain the mechanics of such properties
事实上，因为IMG元素默认显示内嵌图像被居中也作为文本的一部分。
根据你的目标，你可以有它自己的立IMG或他们喜欢这个绝对的位置：
li {
position: relative;
padding-left: 30px;
}
li img{
position: absolute;
left: 0;
}