SS導航選單水平居中的多種方法
在網頁設計中,水平導航選單使用是十分廣泛的,在CSS樣式中,我們一般會用Float元素或是「display:inline-block」來解決。而今天主要講解如何讓未知寬度的元素居中,下面我們會列出幾種方法來解決水平居中問題。當然這些方法不一定是用來解決導航選單問題,還有其它類似情況也是可以使用的。
線上演示:Demo
CSS導航選單水平居中的多種方法:
- 方法1:display:inline-block
- 方法2:position:relative
- 方法3:display:table
- 方法4:display:inline-flex
- 方法5:width:fit-content / width:intrinsic
方法1:display:inline-block
這個方法比較簡單,是將容器轉成「display:inline-block」行內塊級元素,然後就可以直接用「text-align:center」使其達到水平居中效果。
HTML程式碼:
這裡我們需要一個div來包圍這個導航選單。
<div class="navbar"> <ul> <li><a href="/">首頁</a></li> … </ul> </div>
CSS程式碼:
給外面的div新增「text-align:center」,然後將選單容器設成「display:inline-block」行內塊級元素,選單浮左「float:left」
.navbar { text-align:center; } .navbar ul { display:inline-block; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }
這裡瀏覽器相容只能是IE8或更高版本,所以如果要相容IE7的話,請加入以下程式碼
.navbar ul { display:inline; zoom:1; }
方法2:position:relative
這是使用「position:relative」定位方法來讓元素水平居中,我不是很推薦這方法,因為程式碼多了個div去包住,當然這些是根據情況來使用的。
HTML程式碼:
<div class="navbar"> <div> <ul> <li><a href="/">首頁</a></li> … </ul> </div> </div>
CSS程式碼:
將定位div設為浮動,再定位「left:50%」,然後導航定位至「left:-50%」,這方法很有意思吧。可能表達不是很清楚,自己看程式碼吧^^
.navbar { overflow:hidden; } .navbar > div { position:relative; left:50%; float:left; } .navbar ul { position:relative; left:-50%; float:left; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }
如果要相容IE7,請新增以下樣式:
.navbar { position:relative; }
方法3:display:table
如果你喜歡簡潔的程式碼,哪麼這個方法就非常適合你了。
HTML程式碼:
<ul class="navbar"> <li><a href="/">Home</a></li> … </ul>
CSS程式碼:
.navbar { display:table; margin:0 auto; } .navbar li { display:table-cell; } .navbar li + li { padding-left:20px; }
瀏覽器相容:這方法程式碼精簡,但不支援IE7及以下版本……
方法4:display:inline-flex
有關flex layout的知識自己查下吧>_<
HTML程式碼:
<div class="navbar"> <ul> <li><a href="/">Home</a></li> … </ul> </div>
CSS程式碼:
.navbar { text-align:center; } .navbar > ul { display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex; } .navbar li + li { margin-left:20px; }
瀏覽器相容:不支援IE7及以下版本的IE瀏覽器。
方法5:width:fit-content
HTML程式碼:
<div class="navbar"> <ul> <li><a href="/">首頁</a></li> … </ul> </div>
CSS程式碼:
.navbar { text-align:center; } .navbar > ul { display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex; } .navbar li + li { margin-left:20px; }
瀏覽器相容:這個相容比較低,只支援Firefox或chrome、Opera 12這些較新的瀏覽器。
轉:http://www.shejidaren.com/css-center-elements-horizontally.html