（高階）居中沒有寬度的元素

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第7章“CSS3實戰”。

在一個元素內居中另一個元素有時候會很困難。對於常規、靜態定位的元素，可以讓它向左或向右浮動，或者使用text-align屬性讓它在父元素內居左、居右或居中。還可以利用自動外邊距（margin:0 auto）來居中元素。這些方法的問題在於，要居中的元素必須是有寬度的。像這裡用於構成選單的HTML列表，它可能是根據資料庫資訊動態生成的，或者說將來有可能手工編輯，總之你不可能提前設定它的寬度。我收到很多郵件，都是詢問怎麼在容器內部居中選單的。下面也算是統一回答吧，我們來看看怎麼居中一個沒有設定寬度的元素。

在display屬性的值中，inline-block具有一些特殊的混合行為。正如它的名字所暗示的，它既有塊級元素的特點，也有行內元素的行為。從塊級元素角度說，可以為它設定外邊距和內邊距，也可以通過它簡便而有效地包圍其他塊級元素。從行內元素角度看，它會收縮包裹自己的內容，而不是擴充套件填充父元素。換句話說，inline-block元素的寬度始終等於其內容寬度。這種元素還有一個特點，就是可以包圍浮動元素。不過，這種元素也有一個問題，即不能給它的外邊距設定auto值——而這恰恰又是在更大的容器內居中元素的最簡單方法。

解決方案就是為要居中元素的父元素（這裡的nav）應用text-align:center，為要居中的元素（這裡的ul）設定display:inline-block，讓它包含列表項。這樣設定就可以得到我們想要的結果：沒有固定寬度的元素也能在其父元素內居中。如前面程式碼開頭加粗的CSS宣告所示，我們就是這麼做的。現在選單完美居中了，因為其父元素nav忽略了兩端絕對定位的元素，擴充套件到了與header同寬。

為了演示這個技巧有多好，我們來去掉一個選單項。

圖7-8 即使去掉選單項，選單整體上仍然居中

如圖7-8所示，去掉最後一個選單項之後，整個選單照樣居中。對於不同使用者會看到不同選單（比如，區別是否為註冊會員）的動態站點來說，這個技巧的確太有用了。還一個地方要特別留意，就是我沒有直接為第一和第五個選單項新增圓角效果，否則將來如果增減選單項就會出問題。如前面程式碼末尾加粗的宣告所示，為了讓CSS適應選單項的動態變化，我們把圓角效果應用給了:first-child和last-child元素。這樣一來，第五個選單項被刪掉後，第四個選單項就會成為最後一個子元素，從而取得應用給:last-child的圓角效果。