水(shuǐ)平居中的(de)多(duō)種方法

　　CSS導航菜單水(shuǐ)平居中的(de)多(duō)種方法：

　　方法1：display:inline-block

　　方法2：position:relative

　　方法3：display:table

　　方法4：display:inline-flex

　　方法5：width:fit-content / width:intrinsic

　　方法1：display:inline-block

　　這(zhè)個(gè)方法比較簡單，是将容器轉成「display:inline-block」行内塊級元素，然後就可(kě)以直接用(yòng)「text-align:center」使其達到水(shuǐ)平居中效果。

　　HTML代碼：

　　這(zhè)裏我們需要一個(gè)div來(lái)包圍這(zhè)個(gè)導航菜單。

　　首頁

　　…

　　CSS代碼：

　　給外面的(de)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;

　　}

　　這(zhè)裏浏覽器兼容隻能是IE8或更高(gāo)版本，所以如果要兼容IE7的(de)話(huà)，請加入以下(xià)代碼

　　.navbar ul {

　　display:inline;

　　zoom:1;

　　}

　　方法2：position:relative

　　這(zhè)是使用(yòng)「position:relative」定位方法來(lái)讓元素水(shuǐ)平居中，我不是很推薦這(zhè)方法，因爲代碼多(duō)了(le)個(gè)div去包住，當然這(zhè)些是根據情況來(lái)使用(yòng)的(de)。

　　HTML代碼：

　　首頁

　　…

　　CSS代碼：

　　将定位div設爲浮動，再定位「left:50%」,然後導航定位至「left:-50%」，這(zhè)方法很有意思吧。可(kě)能表達不是很清楚，自己看代碼吧^^

　　.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，請添加以下(xià)樣式：

　　.navbar {

　　position:relative;

　　}

　　方法3：display:table

　　如果你喜歡簡潔的(de)代碼，哪麽這(zhè)個(gè)方法就非常适合你了(le)。

　　HTML代碼：

　　Home

　　…

　　CSS代碼：

　　.navbar {

　　display:table;

　　margin:0 auto;

　　}

　　.navbar li {

　　display:table-cell;

　　}

　　.navbar li + li {

　　padding-left:20px;

　　}

　　浏覽器兼容：這(zhè)方法代碼精簡，但不支持IE7及以下(xià)版本……

　　方法4：display:inline-flex

　　有關flex layout的(de)知識自己查下(xià)吧>_<

　　HTML代碼：

　　Home

　　…

　　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及以下(xià)版本的(de)IE浏覽器。

　　方法5：width:fit-content

　　HTML代碼：

　　首頁

　　…

　　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;

　　}