如何居中div而不使列表项居中

Question

设计：

我想列出4列中的项目列表。我会将该块放在页面上的单独行中。我想看到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类条件框列表放在中心？另外如何将线分开列？

更新。

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

Answer 1

因为，您正在使用 bootstrap 添加＆＃34; row＆＃34;您的父容器的类（ condition-box-list ）。列类总是需要包装在bootstrap中具有类行的父容器中。

• 对于较小的显示器，使其能够连续响应，您可以使用display:flex （确保 col-sm-4 ＆amp; col-xs-12 将失去效果并向CSS添加右边框，如CSS中所示。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

第二个解决方案： 如果您不希望它们占用整行的范围（12个引导网格列），则不要使用col- *或行。只需使用 flexbox ：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

设置所需的宽度，然后使用margin: 0 auto将其居中。

否则，您可以使用flexbox。请查看本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。你在这里的财产是合理的内容。

Answer 3

你可以将div放在一个中心：

   yourdiv {
      margin: 0 auto;
    }

Answer 4

也许这应该有所帮助：

.whyus-box {
    width: 25%;
    display: inline-block;
    float: left;
    text-align: center;
}

.condition-box-list ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.condition-box-list li {
    text-align: left;
}

我不知道你的整个CSS，所以我自己做了。但这个想法很简单： 使li内部的文本左对齐，ul应该是内联块和居中对齐（通过在其父对象上设置text-align：center）。

希望这有帮助。