摘要:實現元素垂直居中對元素的垂直居中針對于單行元素和多行元素將分情況討論。三父元素高度確定的多行文本多行文本,圖片,塊級元素皆屬于這種情況,對此的垂直居中主要有兩種方法。插入對要垂直居中的元素外插入包括標簽,同時設置。
CSS實現元素垂直居中
對元素的垂直居中針對于單行元素和多行元素將分情況討論。
一、父元素高度確定的單行文本父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。
HTML結構:
</>復制代碼
Hello World!!!
CSS樣式:
二、父元素高度不確定的多行文本</>復制代碼
對于父元素高度不確定的文本、圖片等的塊級元素的豎直居中可以設置相同的上下內邊距(padding值)即可實現居中,這個數值不必過大。
三、父元素高度確定的多行文本多行文本,圖片,塊級元素皆屬于這種情況,對此的垂直居中主要有兩種方法。
1.插入 table對要垂直居中的元素外插入 table (包括tbody、tr、td)標簽,同時設置 vertical-align:middle。
另需注意,css 中有一個用于豎直居中的屬性 vertical-align,但這個樣式只有在父元素為 td 或 th 時,才會生效。
HTML結構:
</>復制代碼
-
-
-
-
-
-
-
-
Hello World!!!
-
Hello World!!!
-
Hello World!!!
-
Hello World!!!
-
Hello World!!!
-
-
CSS樣式:
</>復制代碼
table td{height:500px;background:#ccc}
因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle,所以我們不需要顯式地設置了。
2.設置塊級元素的 display 為 table-cell在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell,激活 vertical-align 屬性,但注意 IE6、7 并不支持這個樣式。
HTML結構:
</>復制代碼
Hello World!!!
Hello World!!!
Hello World!!!
Hello World!!!
Hello World!!!
CSS樣式:
</>復制代碼
這種方法的好處是不用添加多余的無意義的標簽,但缺點也很明顯,它的兼容性不是很好,不兼容 IE6、7。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49616.html
摘要:水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等,從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題,也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15種。...
摘要:水平居中行內元素解決方案適用元素文字,鏈接,及其其它或者類型元素,,部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行內元素解決方案 適用元素:文字,鏈接,及其其它inline或者inline-*類型元素(inline-block,inline-table,i...
摘要:水平居中行內元素解決方案適用元素文字,鏈接,及其其它或者類型元素,,部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行內元素解決方案 適用元素:文字,鏈接,及其其它inline或者inline-*類型元素(inline-block,inline-table,i...
摘要:水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等,從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題,也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15種。...
摘要:水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等,從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題,也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15種。...
摘要:,水平居中行內元素把行內元素放在一個屬性塊元素中,然后設置父層元素屬性居中,水平居中塊狀元素設置外邊距,水平居中多個塊狀元素把塊狀元素屬性,然后設置父層元素屬性居中,水平居中多個塊狀元素布局實現把塊狀元素的父元素屬性和,如下設置, 1,水平居中:行內元素 把行內元素放在一個屬性塊(display:block)元素中,然后設置父層元素屬性居中: .test { text-align:ce...
閱讀 3714·2023-04-26 00:56
閱讀 2693·2021-09-30 10:01
閱讀 970·2021-09-22 15:30
閱讀 3927·2021-09-07 10:21
閱讀 1530·2021-09-02 15:40
閱讀 2766·2021-08-30 09:47
閱讀 1249·2021-08-16 10:57
閱讀 1871·2019-08-30 14:01