CSS中的問號樣式最常見的應用就是在表單中作為提示或錯誤信息的標志,但有時候會發(fā)現(xiàn)問號并沒有居中顯示,這是因為CSS的盒模型存在一些細微的差異導致的。下面我們來看一下怎樣解決這個問題。
.question-mark { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; background-color: #ccc; border-radius: 50%; font-size: 12px; }
以上是我們樣式中用來展示問號圖標的類名,我們可以看到,樣式中設置了16px的高寬,讓問題的Icon變成一個正方形,不僅如此,我們還使用了text-align屬性讓之居中,同時指定了line-height使內容垂直方向上也自動居中。
除了上述方法,如果已經(jīng)設置了line-height屬性,我們也可以使用vertical-align讓問號居中。將vertical-align設置為middle可以將元素垂直居中對齊。而且vertical-align屬性不僅可以用于垂直方向上,還可以用于水平方向。
.question-mark { display: inline-block; width: 16px; height: 16px; line-height: 16px; background-color: #ccc; border-radius: 50%; font-size: 12px; vertical-align: middle; }
上面代碼只是增加了一個vertical-align:middle屬性,減少了text-align:center,但在視覺效果上,二者并無區(qū)別。所以我們可以根據(jù)實際需要來使用這兩種方式。
總之,CSS中的問號不居中問題可以通過上述兩種方法來解決。我們可以根據(jù)實際情況選擇最適合的一種方式,從而達到更好的設計效果。