? ? ? ?以往，對于這種小的控件類型，或者說功能，喜歡用span來解決，今天才發現，span在“position:absolute;”下，文字是無法垂直居中的，無論是“text-align:center;”，“vertical-align:middle;”，抑或與height保持一致的“inline-height”都行不通，最蠢的辦法就是利用padding，但是padding弄處理，在不同屏幕分辨率上，簡直愁。

????? ? 于是，改成用div去實現，添加樣式，這里用了“inline-height”：

.tabsInfo {
? ? position: absolute;
? ? top: 0px;
? ? left: 55%;
? ? height: 16px;
? ? width: 16px;
? ? background: red;
? ? line-height: 16px;
? ? color: #fff;
? ? border-radius: 50%;
? ? font-size: 12px;

}

????? ?結果例如下圖所示：

總結

以上是生活随笔為你收集整理的前端关于添加一个带有数字圈，类似手机端有多少条未读信息那样子，自己的坑来备注下。的全部內容，希望文章能夠幫你解決所遇到的問題。

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