Question

我想在下面的代码中创建的12列中居中一个无序的块样式列表。我正在尝试使用已激活中心样式的跨度，但它无法正常工作。

<div class="col-sm-12">

     <span style="center";>
      <ul class="four-step-enrichment-list">
        <li><a>Step-by-step</a></li>
        <li><a>Wastes</a></li>
        <li><a>Controls</a></li>
        <li><a>Risks</a></li>
        <li><a>Documents</a></li>
        <li><a>Reviewed by</a></li>
      </ul></center>
    </span>
</div>

CSS

.four-step-enrichment-list li a{
    display: block;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.four-step-enrichment-list li {
    float: left;
}

.four-step-enrichment-list {
    list-style-type: none;
    align-content: center;
}

Answer 1

我认为这正是您所寻找的，请参阅小提琴https://jsfiddle.net/4urqnxze/3/

您可以删除所有这些无意义的包装列表，请参阅html：

<ul class="four-step-enrichment-list">
  <li><a>Step-by-step</a></li>
  <li><a>Wastes</a></li>
  <li><a>Controls</a></li>
  <li><a>Risks</a></li>
  <li><a>Documents</a></li>
  <li><a>Reviewed by</a></li>
</ul>

然后将display: flex和justify-content: space-around;添加到列表中，参见CSS

.four-step-enrichment-list {
  list-style-type: none;
  align-content: center;
  display: flex;
  justify-content: space-around;
}

Answer 2

您需要将div容器显示为表格，并添加自动边距。同时将ul填充设置为0。

ul.four-step-enrichment-list li a{ display: block; text-align: center; padding: 16px; text-decoration: none; }
ul.four-step-enrichment-list li {
  float: left;
  display: block;
}
ul.four-step-enrichment-list {
  list-style-type: none;
  padding: 0;
  
}
div.col-sm-12 {
  display: table;
  margin: auto;
}

<div class="col-sm-12">
  <ul class="four-step-enrichment-list">
    <li><a>Step-by-step</a></li>
    <li><a>Wastes</a></li>
    <li><a>Controls</a></li>
    <li><a>Risks</a></li>
    <li><a>Documents</a></li>
    <li><a>Reviewed by</a></li>
  </ul>
</div>

Answer 3

我假设你想要列表中心，而不是列表中的元素。您可以使用flex实现此目的，如下所示：

＆＃13;

ul {
  list-style: none; 
  padding: 0;
  margin: 0;
}

.center {
  display: flex;
  justify-content: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 center">
    <ul>
      <li>Element sdfad</li>
      <li>Element</li>
      <li>Element sad</li>
      <li>Element ssdfadsghh</li>
      <li>Element sdfad</li>
    </ul>
  </div>
</div>

＆＃13;

如何将无序阻止列表居中

3 个答案: