如何優雅的水平居中列表元素的內容？

今天分享的內容來自於 Jeff Starr 的文章《CSS: Center-Align List with Left-Aligned Text (and Unknown Width)》。 寫網頁時，若是要你實現一個水平居中顯示的列表該怎麼作呢？

text-align: center

首先，最容易想到的就是列表元素直接 text-align: center：

ul {
  text-align: center;
}
複製代碼

看看效果：

爲了便於觀察，我給這裏的 li 標籤加了背景。

還不夠完美，內容確實居中顯式了，但由於沒有左對齊，看起來不是很方便。其次，<ul> 上的小圓點，距離列表內容太遠了，不是很美觀。

margin: auto

默認 <ul> 是 display: block 的，既然是塊狀元素，咱們就能夠使用 margin: auto 的方式居中它。

Chrome 中，<ul> 默認的用戶代理樣式。

ul {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
複製代碼

效果：

此次效果是有了，可是這種方式有一個侷限性，就是必需要爲列表元素指定一個寬，不然是看不見效果的。

那麼，若是內容是動態生成，長度不定的，還如何保證內容居中顯示呢？

display: inline-block

有一個思路，就是將 <ul> 設置成 display: inlinb-block 的，這樣它的寬度默認就是由內容撐開了，接着再對它應用 text-align: center 就好了。

.parent {
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}
複製代碼

效果：

很好！惟一的缺點就是須要引入一個父元素，不過確實實現了咱們的優雅水平居中的需求。

相關連接

• CSS: Center-Align List with Left-Aligned Text (and Unknown Width)，by Jeff Starr
• 在線 demo 地址

（完）