如何在中心引导程序中使用无序列表制作 div？

Posted 2023-03-29

【中文标题】如何在中心引导程序中使用无序列表制作 div？

【英文标题】：How Make a div with Unordered list in Center bootstrap?

【发布时间】：2017-02-15 08:14:58

【问题描述】：

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

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

没有用。

【问题讨论】：

发布您的 UL 代码

【参考方案1】：

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

在第一个示例中，我使用引导列的概念居中。您知道引导网格将 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>

【参考方案2】：

试试这个：

text-align: center;

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

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

width: 500px;
margin: auto;

然后相应地调整宽度。