如上圖所示，要做圖中黃色區域的到期提醒，要求提醒的內容（提醒的內容是指黃色背景上的圖示和文字）居中顯示。
我將圖中的驚嘆號標識做為提醒內容的背景處理， 而這就要求內容區有乙個高度，所以內容區必須是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天時顯示『即將到期』 >
www.cppcns.com>
您的帳戶即將到期，為方便您的使用，請盡快與能力eymyv天空銷售聯絡。聯絡**：4006164080
在code上檢視**片派生到我的**片
複製**
**如下:
.almost-expire-tip
.almost-expire-tip-content
背景垂直方向的-70px是因為使用了css sprite合併了。
本文標題: 水平居中塊級元素較好的實現
本文位址:
塊級元素水平居中的問題
doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta name keywords content meta name d...
行內元素和塊級元素的垂直居中，水平居中
一 行內元素 1 行內元素的水平居中 給父級元素使用屬性text align center 2 行內元素的垂直居中 給父級元素使用屬性line hight 父元素盒子的高度 二 塊級元素 1 塊級元素的水平居中 給子級元素使用屬性margin 0 auto 2 行內元素的水平垂直居中，有四種方法 h...
Css之關於塊級元素水平居中
第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現，但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了，但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度，對它設...