前言

行内元素：指在同一行内不自动换行，可以和其他行内元素在同一水平的元素，不可以设置宽高。

行内元素设置宽高：行内元素想要设置宽高，需要用display：inline-block设置（详解如下表）。

正文

代码：

其文本不水平垂直居中主要是因为设置宽高后导致的，解决方法很简单

水平居中：

text-align: center;

上下居中（30px是由span的高决定的）：

line-height: 30px;

效果（这下文本就居中了）：

解析

主要因为设置过宽高后，文本默认其实还是以一个正常的行内元素的排版样式显示的（他还没有意识到自己有了宽高），所以需要设置水平居中（text-align: center;），在设置垂直居中（行高）就行了（line-height: 30px;），注意设置行高要想垂直居中效果，行高必须和元素高度设置一致，这样字体才能知道自己在一个30px高的行内，那样他才能去居中显示。