如何在中心 bootstrap 中创建无序列表的 div？

Question

text-center 使文字居中，但点仍然在左角。

float: none;
margin-left: auto;
margin-right: auto;

没有成功。

Answer 1

试试这个：

text-align: center;

你上面的措辞不太好，所以不太确定你是否尝试过。

或者，您可以在 css 中定义 width，然后像这样执行 margin: auto;：

width: 500px;
margin: auto;

然后相应地调整宽度。

Answer 2

下面您将看到使用 bootstrap 且不使用 bootsrap 的居中列表示例。

在第一个示例中，我使用 bootstrap 列的概念居中。你知道 bootstrap 网格将 12 列解释为全屏，所以我基本上是说将列表放在 6 列中，偏移量为 3 列 ((12 - 6)/2 = 3)。

在第二个示例中，这是我使用 flexbox 的首选方法。 justify-content center 几乎告诉元素相对于它们的父元素水平居中 div。（调用 flexbox 的 div）

h4 {
  text-align: center;
}

.list {
    display: flex;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <h4>Centering unordered lists with bootstrap columns</h4>
  <div class="col-xs-6 col-xs-offset-3">
    <ol>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>
<hr><br><hr>
<div class="no-bootstrap">
  <h4>Centering unordered lists without boostrap</h4>
  <div class="list">
    <ol>
      <li>Lorem ipsum blah blahsdfadsf blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah bdfasdfasdflah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>

如何在中心 bootstrap 中创建无序列表的 div？

How Make a div with Unordered list in Center bootstrap?

html

center

unordered

twitter-bootstrap