CSS中五種方法實作導覽選單水平居中的實例詳解

在網頁設計中，水平導航選單使用是十分廣泛的，在CSS樣式中，我們通常會用Float元素或是「display:inline-block」來解決。而今天主要講解如何讓未知寬度的元素居中，下面我們會列出幾種方法來解決水平居中問題。當然這些方法不一定是用來解決導覽選單問題，還有其它類似情況也是可以使用的。

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程式碼：

這裡我們需要一個p來包圍這個導覽選單。

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS程式碼：

為外面的p加上「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」定位方法來讓元素水平居中，我不是很推薦這方法，因為程式碼多了個p去包住，當然這些是根據情況來使用的。

HTML程式碼：

<p class="navbar">
    <p>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </p>
</p>

CSS程式碼：
將定位p設為浮動，再定位「left:50%」,然後導航定位至「left:-50%」，這方法很有意思吧。可能表達不是很清楚，自己看程式碼^^

.navbar {
    overflow:hidden;
}
.navbar > p {
    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程式碼：

<p class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</p>

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程式碼：

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

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這些較新的瀏覽器。 

寫在最後：方法1：display:inline-block 簡單易懂。

 

以上是CSS中五種方法實作導覽選單水平居中的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！