css - 如何在不使列表项居中的情况下使 div 居中

Question

设计:

我想要 4 列中的元素列表。我会将该 block 放在页面上的单独行中。我希望看到 div 类 condition-box-list 居中，但列表项应左对齐。我还希望在列之间看到一条分隔线。

HTML:

<div class ="condition-box-list">

<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>

</div> 

CSS:

.condition-box-list{text-align:center}

现在的样子:

如何将 div 类 condition-box-list 放在中间，同时列表项左对齐？还有如何用线来分隔列？

---

更新。

在我看来这很容易，但它很复杂。

Answer 1

既然您正在使用 bootstrap，请将“row”类添加到您的父容器 (condition-box-list)。列类 always 需要包装在 Bootstrap 中具有类 row 的父容器中。

• 对于较小的显示器使其仍然以行方式响应，您可以使用 display:flex (然后确保 col-sm-4 & col-xs-12 将失去其效果) 并添加右边框到列，如 CSS 中所示。

.condition-box-list{
display:flex;
}
.condition-box-list>*{
border-right:2px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class ="condition-box-list row">

<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box col-md-3 col-lg-3  col-sm-4 col-xs-12">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>

</div>

第二种解决方案: 如果您不希望它们占据整行(12 个引导网格列)的跨度，则不要使用 col-* 或行。只需使用 flexbox:

.condition-box-list{
display:flex;
justify-content: center; /*Aligns contents horizontally */
text-align:left;
width:100%;
}
.condition-box-list>*{
border-right:2px solid black;
width:20%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class ="condition-box-list">

<div class="whyus-box">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>
<div class="whyus-box">
<ul>
  <li><span class="glyphicon glyphicon-ok"></span> item one</li>
  <li><span class="glyphicon glyphicon-ok"></span> two </li>
  <li><span class="glyphicon glyphicon-ok"></span> item three</li>
</ul>
</div>

</div>