如何將列表項的兩列水平居中（帶或不帶Bootstrap）？

Question

請原諒，這個問題很難解釋，我很難找到解決方案。

我有一個項目清單，我想分為兩列。 我想使列表項文本保持左對齊，以便您看到的星號本身在某種列中保持對齊。 但是，我希望列表項的兩列始終在視口中居中。 此外，列表項包含可變長度的文本，因此使用bootstrap的文本中心會使它們混亂，並且不會使li列保持完整。 實際上，列表中的每個項目都是一個鏈接，旁邊是一個FontAwesome圖標。

例

就目前而言，我的代碼與此類似。

<ul class="col-xs-12">
  <li class="col-xs-6">*List Item</li>
  <li class="col-xs-6">*Some List Item</li>
  <li class="col-xs-6">*A List Item</li>
  <li class="col-xs-6">*One List Item</li>
  <li class="col-xs-6">*This List Item</li>
  <li class="col-xs-6">*Im A List Item</li>
</ul>

這類似於它們現在呈現的方式：

| *列表項*列表項|
| *列表項*列表項|
| *列表項*列表項|

這就是我希望他們渲染的方式：

| *列表項*列表項|
| *列表項*列表項|
| *列表項*列表項|

我還要提到，我希望他們保持流動。 我沒有固定的寬度。

另外，我嘗試過偏移列，但它似乎無法按照我想要的方式工作。 我也嘗試過使用CSS列：2，我不知道如何使它們按我想要的方式工作。 我以為我必須為此編寫一些js，但我想知道是否有人使用Bootstrap或CSS或兩者的結合進行了修復。

如果我的問題有任何問題，請原諒。 這是我在Stack Overflow的第一篇文章。

更新：

到目前為止，最好的解決方案以及與我正在尋找的解決方案最接近的解決方案是：

http://plnkr.co/edit/eo40fOMNVlRt9gBT4us4?p=preview

唯一的問題是，如果每個li> a具有不同的文本值（並且確實如此，但是我對它們有18個字符的限制），則出現在每個li> a左側的FontIcons（星號）不會水平對齊。 但是，如果您查看該導航鍵，則無論瀏覽器窗口大小如何，這些列表列區域始終始終准確地位於其視口的一半中心。 我很欣賞下面很多想法背后的想法，但是即使我限制了字符串值的長度，引導程序的列也可能太短，因此可能導致文本字符串溢出到小寫的下一行，這仍然會引起問題。視口寬度。 此外，將它們鎖定在列中會迫使每個列在一定寬度上不居中。

我想可能是時候開始為此編寫腳本了。 請，任何其他想法表示贊賞。

Answer 1

嘗試：

<ul class="col-xs-offset-2 col-xs-8">
<li class="col-xs-6">*List Item</li>
<li class="col-xs-6">*This List Item</li>
<li class="col-xs-6">*I Am List Item</li>
<li class="col-xs-6">*List Item</li>
<li class="col-xs-6">*A List Item</li>
<li class="col-xs-6">*Im An Item</li>
</ul>

http://plnkr.co/edit/Mh0IxzzdRE8ZmeX9gNWJ?p=preview

Answer 2

好吧，您可以對列使用引導程序類，因此您將具有以下內容：

<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Second</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Third</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Some other len</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>

我將每個“ li”分為兩個子列：3和9。您可以根據需要進行更改，但要保持它們的總和等於12（引導程序樣式）。 因此，您可以設置自己喜歡的內容：

<li class="col-xs-6"><div class="col-xs-4"></div><div class="col-xs-8">*List Item</div></li>
...

我做了一個矮人，您可以在這里嘗試自己喜歡的東西： PLUNKR

Answer 3

如果您可以放棄舊瀏覽器支持，那么可以使用純CSS解決方案：

CSS3多列

 ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; list-style-position: inside; } 

 <ul> <li><a>Item 1</a></li> <li><a>Item 2</a></li> <li><a>Item 3</a></li> <li><a>Item 4</a></li> <li><a>Item 5</a></li> <li><a>Item 6</a></li> <li><a>Item 7</a></li> <li><a>Item 8</a></li> <li><a>Item 9</a></li> <li><a>Item 0</a></li> <li><a>Item 1</a></li> <li><a>Item 2</a></li> <li><a>Item 3</a></li> <li><a>Item 4</a></li> </ul>