水平居中塊級元素較好的實現

2022-09-25 03:48:08 字數 855 閱讀 9345

如上圖所示,要做圖中黃色區域的到期提醒,要求提醒的內容(提醒的內容是指黃色背景上的圖示和文字)居中顯示。

我將圖中的驚嘆號標識做為提醒內容的背景處理, 而這就要求內容區有乙個高度,所以內容區必須是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這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度,對它設...