在Bootstrap 3中的单元格中心ul

Question

我有一个使用Bootstrap 3的网页.在这个网页中,我试图将a集中ul在一个col-xs-12.目前,在这个Bootply中,我有以下内容:

<div class="container">
  <div class="row">
    <div class="col-xs-12 center-block" style="background-color:grey;">
      <ul class="list-inline">
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
      </ul>
    </div>
  </div>
</div>

如图所示,它在ul左边对齐div.如何居中ul的div.如果那是不可能的,我该如何水平放置水平布置项目列表？

Answer 1

<ul class="list-inline">
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
</ul>

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

Answer 2

尝试添加属性display:flex和justify-content:centerdiv