資訊專欄INFORMATION COLUMN
摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現水平居中了這樣我們就可以通過設置水平居中間接使里面的內容居中。轉自未知寬度水平居中的幾種方法
在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，并選了一個最合適的方法，現將當時整理的一些方法發出。下列以分頁作為演示說明：
點擊查看演示DEMO
方案一利用浮動的包裹性和相對定位百分比數據值特性,傳說稱之為“相對浮動”
.unknow_width_center1 {position:relative; left:50%; float:left;}
.unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left}
通過給父元素設置浮動float,再設置父元素的position屬性為relative和left:50%;子元素設置position:relative和left:-50%來實現水平居中。
可以保留塊級元素仍然是以display:block的形式顯示,不會添加無意義的標簽,不添加嵌套深度。缺點是設置了position:relative;帶來了一些副作用，并且需要閉合（清除）浮動。
方案二利用text-align屬性特性（text-align:center 對于ie6、7塊級和內聯級都可以水平居中。其它瀏覽器內聯級(內聯塊級，文字)元素才可以水平居中，塊級無效。 ）強制定義為內聯 display:inline
.unknow_width_center2 {text-align:center; padding:5px;}
.unknow_width_center2 li {display:inline;}
將子元素設置為內聯居中，那么大家都知道的display:inline內聯元素寬高是不可以設定的，局限性太大，不宜使用。
方案三利用table的屬性特性
.unknow_width_center3{margin:0 auto}
.unknow_width_center3 ul {overflow:hidden; *zoom:1}
.unknow_width_center3 ul li {float:left;}
是使用table作為容器的方法來實現。添加了無意義的標簽。Table標簽本身并不是塊級元素,當我們不設置table的寬度的話,他里面的寬度是由他內部元素的寬度撐起來的。但即使我們沒有設置table的寬度,直接設置table的外邊距margin:0 auto;就可以實現水平居中了!這樣我們就可以通過設置table水平居中,間接使里面的內容居中。
方案四利用內聯塊display:inline-block的text-align屬性
.unknow_width_center4 {text-align:center}
.unknow_width_center4 ul li {display:inline-block; *display:inline; *zoom:1;}
IE6/7下直接設置display:inline-block的居中無效，這里在IE6/7下設置了display:inline，神奇的是竟然可以設置寬高及其垂直方向的內外邊距。缺點是display:inline-block會引起一些間隙，當然有看起來礙眼解決方案。
方案五利用table table-cell
.unknow_width_center5 ul{ display:table; margin:0 auto; }
.unknow_width_center5 li{display:table-cell;}
ie6/ie7不支持table-cell屬性，所以該方法也不適用ie6/ie7,如果需要兼容在這基礎上加東西也很蛋疼。
點擊查看演示DEMO
個人偏向使用方法一”相對浮動”，適用廣泛代碼簡潔且不會出現什么問題，可惜就是每次使用的時候要考慮浮動的處理。
轉自：cocss ? 未知寬度水平居中的幾種方法
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111009.html
摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現水平居中了這樣我們就可以通過設置水平居中間接使里面的內容居中。轉自未知寬度水平居中的幾種方法 在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，并選了一個最合適的方法，現將...
摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...
摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...
摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...
摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內 前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...
閱讀 1599·2021-11-22 09:34
閱讀 1689·2019-08-29 16:36
閱讀 2668·2019-08-29 15:43
閱讀 3113·2019-08-29 13:57
閱讀 1297·2019-08-28 18:05
閱讀 1874·2019-08-26 18:26
閱讀 3242·2019-08-26 10:39
閱讀 3453·2019-08-23 18:40
