前言

行內元素：指在同一行內不自動換行，可以和其他行內元素在同一水平的元素，不可以設置寬高。

行內元素設置寬高：行內元素想要設置寬高，需要用display：inline-block設置（詳解如下表）。

display值	作用
display:block	設置元素為塊級元素（塊級元素獨占一行，可以設置寬高）
display:inline	設置元素為行內元素（行內在一行排列，不可以設置寬高）
display：inline-block	設置元素為行內塊級元素（此值見名知意，融合了塊級元素和行內元素的特性，是一個可以設置寬高的塊級元素）

正文

代碼：

其文本不水平垂直居中主要是因為設置寬高后導致的，解決方法很簡單

水平居中：

text-align: center;

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

line-height: 30px;

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

?解析

主要因為設置過寬高后，文本默認其實還是以一個正常的行內元素的排版樣式顯示的（他還沒有意識到自己有了寬高），所以需要設置水平居中（text-align: center;），在設置垂直居中（行高）就行了（line-height: 30px;），注意設置行高要想垂直居中效果，行高必須和元素高度設置一致，這樣字體才能知道自己在一個30px高的行內，那樣他才能去居中顯示。

總結

以上是生活随笔為你收集整理的设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。