前言
行内元素:指在同一行内不自动换行,可以和其他行内元素在同一水平的元素,不可以设置宽高。
行内元素设置宽高:行内元素想要设置宽高,需要用display:inline-block设置(详解如下表)。
正文
代码:
其文本不水平垂直居中主要是因为设置宽高后导致的,解决方法很简单
水平居中:
text-align: center;
上下居中(30px是由span的高决定的):
line-height: 30px;
效果(这下文本就居中了):
解析
主要因为设置过宽高后,文本默认其实还是以一个正常的行内元素的排版样式显示的(他还没有意识到自己有了宽高),所以需要设置水平居中(text-align: center;),在设置垂直居中(行高)就行了(line-height: 30px;),注意设置行高要想垂直居中效果,行高必须和元素高度设置一致,这样字体才能知道自己在一个30px高的行内,那样他才能去居中显示。