如上圖所示，要做圖中黃色區域的到期提醒，要求提醒的內容（提醒的內容是指黃色背景上的圖標和文字）居中顯示。
我將圖中的驚歎號標識做爲提醒內容的背景圖片處理， 而這就要求內容區有一個高度，所以內容區必須是block-level的。 但block level的元素的寬度默認等於父元素的寬度，這樣的話內容將從黃色左邊界開始顯示. 且設置text-align: center; 只能將文字居中而無法將背景圖片居中且顯示在文字的左邊。
之前想的一個做法：
給內容區 設置一個width, 然後 margin: 0 auto; 然後背景定位在內容的左邊再設一個padding-left即可。這種做法的缺點是不靈活，一旦文字有變化或背景圖片大小要變就需要改動樣式表。
較好的實現：
將內容區display: inline-block， 背景圖的設置跟dispaly:block時一樣，即background-position: left; padding-left: 50px; 即可。然後黃色區 text-align: center; 完整代碼如下：
<!-- 使用天數小於等於30天時顯示‘即將到期’ -->
<div class="almost-expire-tip">
<div class="almost-expire-tip-content">您的帳戶即將到期，爲方便您的使用，請儘快與能力天空銷售聯繫。聯繫電話：4006164080</div>
</div>.almost-expire-tip { width: 100%; height: 68px; line-height: 68px; background: #FC0; text-align: center; }
.almost-expire-tip-content { display:inline-block; *display:inline; *zoom:1; padding-left: 50px; background: #FC0 url(http://www.ablesky-a.com:8080/ableskystatics/images/organizationAdmin/sprite_ico.png) no-repeat 0 -70px; font-size: 22px; }背景圖片垂直方向的-70px是因爲使用了css sprite合併了圖片。