如何使用CSS将文本垂直居中

Question

如您在下图中所看到的，文本的下方有空白，但上方没有空白，导致文本垂直居中。可能是什么原因造成的？如何使文本垂直居中？

垂直未居中的文本：

文本的Computed CSS样式：

background-color: rgb(255, 0, 0) ; 
color: rgb(255, 255, 255) ; 
cursor: pointer ; 
display: inline-block ; 
font-family: adiNeue ; 
font-size: 17px ; 
height: 17px ; 
letter-spacing: 1px ; 
line-height: 17px ; 
margin-bottom: 0px ; 
margin-left: 0px ; 
margin-right: 0px ; 
margin-top: 0px ; 
padding-bottom: 0px ; 
padding-left: 0px ; 
padding-right: 0px ; 
padding-top: 0px ; 
text-align: center ; 
text-transform: uppercase ; 
width: 66.4375px ;

---

编辑： 事实证明页面中的所有元素都有相同的问题。你知道是什么原因造成的吗？

Answer 1

正如Tej所说，Padding使您想要的事情成真。您可以将用于测试目的的代码简化为如下所示，以查看填充的效果：

background-color: rgb(255, 0, 0);
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
width: 66.4375px;
padding: 5px;

Answer 2

事实证明，文本下方的多余空间是为文本descenders保留的（即，字母g位于行下方的部分）。

使文本在所有显示器上居中显示的唯一方法是使用JavaScript，因为您事先无法知道保留空间的确切高度。

Answer 3

使用 CSS垂直对齐属性 vertical-align属性用于使垂直内联元素居中。

vertical-align的值使元素相对于其父元素对齐：

相对于线的值将元素相对于整条线垂直对齐。 表格单元格的值是相对于table-height-algorithm的，通常表示行的高度。

Answer 4

尝试更改padding属性，如下所示：

span {
  background-color: rgb(255, 0, 0) ; 
color: rgb(255, 255, 255) ; 
cursor: pointer ; 
display: inline-block ; 
font-family: adiNeue ; 
font-size: 17px ; 
height: 17px ; 
letter-spacing: 1px ; 
line-height: 17px ; 
margin: 0px ;  
padding: 12px ;  
text-align: center ; 
text-transform: uppercase ; 
width: 66.4375px ;
}