Question

text-center将文字放在中心，但点仍在左下角。

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

没用。

Answer 1

下面你将看到带有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>

Answer 2

试试这个：

text-align: center;

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

或者，您可以在css中定义width，然后执行margin: auto;，如下所示：

width: 500px;
margin: auto;

然后相应地调整宽度。

如何在Center bootstrap中使用无序列表创建div？

2 个答案: