CSS居中的不同情況使用不同的方法

2021-06-28 02:37:29 字數 1391 閱讀 6710

內容提要:css居中的不同情況使用不同的方法,css的居中會遇到很多種情況,不同的情況使用的方法不同。 1、水平居中,(1)文字、等行內元素的水平居中...

css的居中會遇到很多種情況,不同的情況使用的方法不同。

1、水平居中

(1)文字、等行內元素的水平居中

(2)確定寬度的塊級元素的水平居中

確定寬度的塊級元素水平居中是通過設定margin-left:auto和margin-right:auto來實現的。

(3)不確定寬度的塊級元素的水平居中

不確定寬度的塊級元素有三種方式可以實現居中。以分頁模組為例,因為分頁的數量是不確定的,所以我們不能通過設定寬度來限制它的彈性。

2、豎直居中

(1)父元素高度不確定的文字、、塊級元素的豎直居中

父元素高度不確定的文字、、塊級元素的豎直居中是通過父容器設定相同上下邊距實現的。

(2)父元素高度確定的單行文字的豎直居中

父元素高度確定的單行文字的豎直居中,是通過給父元素設定line-height來實現的,line-height值和父元素的高度值相同。

(3)父元素高度確定的多行文字、、塊級元素的豎直居中

父元素高度確定的多行文字、、塊級元素的豎直居中有兩種方法。

方法一:說到豎直居中,css中有乙個用於豎直居中的屬性vertical-align,但只有當父元素為td或者th時,這個vertical-align屬性才會生效,對於其他塊級元素,例如div、p等,預設情況下是不支援vertical-align屬性的。在firefox和ie 8下,可以設定塊級元素的display型別為table-cell,啟用vertical-align屬性,但ie 6和ie 7並不支援display:table-cell,所以這種方法沒辦法跨瀏覽器相容。但我們可以使用最原始的笨方法來實現相容——既然不支援塊級元素設定為display:table-cell來模擬**,那麼,我們就直接使用**好了。

方法一可以很好地實現豎直效果居中,且不會帶來任何樣式上的***,但它新增了無語義的標籤,並增加了巢狀深度。

方法二:對支援display:table-cell的ie 8和firefox用display:table-cell和vertical-align來實現居中,對不支援display:table-cell的ie 6和ie 7,使用特定格式的hack。

方法二利用hack技術區別對待firefox、ie 8和ie 6、ie 7,在不支援display:table-cell的ie 6和ie 7下,通過給父子兩層元素分別設定top:50%和top:-50%來實現居中。這種方法的好處是沒有增加額外的標籤,但它的缺點也很明顯,一方面它使用了hack,不利於維護、另一方面,它需要設定position:relative和position:absolute,帶來了***。 『 

網頁設計 | 

div+css 』

閥門在不同情況的洩露

砂眼洩露 1.鑄造缺陷,有氣孔 夾渣 鬆散組織等。嚴格遵守工藝和操作紀律,按時按量按質新增抗老化劑。有完整的質量保證體系,出廠產品符合質量標準 2.鍛造缺陷,有夾渣 摺疊等。根據工況條件選用閥門,注重壓力 溫度 介質相互間約制關係,留有一定餘地 3.注塑缺陷,有氣孔 夾渣 冷隔 缺肉等。根據塑料 橡...

不同情況通知執行的順序

1.service方法有返回值 無異常 xml 1.前置通知.deleteuser 2.環繞通知.開啟事務.deleteuser 通過id刪除使用者 3.後置通知.deleteuser 返回值 1 4.環繞通知.提交事務.最終通知.deleteuser 2.service方法有返回值 無異常 註解 ...

遞迴函式在不同情況的用法

根據近幾天除錯乙個 的經驗,發現遞迴函式可分為以下兩類 1.遍歷型 2.指定結束型 遍歷型的乙個代表是遍歷樹,它是訪問到所有結點 指定結束型的乙個代表是求解斐波那契,它是到達乙個指定條件後層層退出。對於指定結束型,必須在分支前 如for迴圈次數就是分支次數 加上判斷是否達到指定結束條件的語句,否則,...