javascript - 如何水平居中两列列表项(有或没有 Bootstrap)？

Question

请原谅，这个问题很难解释，我很难找到解决方案。

我有一个元素列表，我想将其分成两列。我想让列表项文本保持左对齐，以便您看到的星号本身在某种列中保持对齐。但是，我希望列表项的两列始终在视口(viewport)中居中。此外，列表项包含可变长度的文本，因此使用 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 columns: 2 但我不知道如何让它们按照我想要的方式工作。我假设我将不得不为此编写一些 js，但我想知道是否有人使用 Bootstrap 或 CSS 或两者的组合进行了修复。

如果我的问题有任何问题，请原谅。这是我在 Stack Overflow 上的第一篇文章。

更新:

到目前为止，最好看的解决方案，也是最接近我正在寻找的解决方案来自:

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

唯一的问题是，如果每个 li>a 都有不同的文本值(它们确实有，但我对它们有 18 个字符的限制)，则出现在每个 li>a 左侧的 FontIcons(星号)会赢'水平对齐。但是，如果您看一下那个 plunker，那么无论浏览器窗口大小如何，这些列表列区域总是恰好位于其一半视口(viewport)的中心。我很欣赏下面很多想法背后的想法，但即使我限制了字符串值的长度， Bootstrap 的列可能仍然太短，因此导致文本字符串溢出到下一行视口(viewport)宽度。此外，将它们锁定到列中会强制每个列以特定宽度不居中。

我想我可能是时候开始为此编写脚本了。请感谢任何其他想法。

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