如何水平居中两列列表项（有或没有 Bootstrap）？

Question

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

我有一个我想分成两列的项目列表。我想保持列表项文本左对齐，以便您看到的星号本身在某种列中保持对齐。但是，我希望两列列表项始终在视口中居中。此外，列表项包含可变长度的文本，因此使用引导程序的文本中心会混淆它们并且不会保持 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(asterisks) 赢了'不水平对齐。但是，如果您看一下那个 plunker，这些列表列区域总是在它们的一半视口中完全居中，无论浏览器窗口大小如何。我很欣赏下面很多想法背后的想法，但是即使我限制了字符串值的长度，引导程序的列可能仍然存在问题，因为它太短了，因此导致文本字符串溢出到小字体的下一行视口宽度。此外，将它们锁定在列中会迫使每个列在某些宽度处不居中。

我想是时候开始为此编写脚本了。请，任何其他想法表示赞赏。

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>
...

我做了一个 plunker，你可以在其中尝试你喜欢的东西：PLUNKR

Answer 3

如果您可以放弃旧浏览器的支持，则有一个纯 css 解决方案：

CSS3 Multiple Columns

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>