html - 保持div水平居中

Question

我有很好的 Bootstrap ，在那个井里面有一个 div，其中包含名为“parent”的元素。 parent 彼此漂浮。如果 div 足够大以容纳 4 个 parent ，它将容纳 4 个 parent 排成一排，其他排成一排，依此类推，如果它大到足以容纳三个 parent ，它将容纳三个排成一行......(大小取决于屏幕宽度).当 div 对于 3 个半 parent 或 4 和 20px 或类似的东西来说很大时，就会出现问题。然后左边的地方用边距填充，如图所示:

我怎样才能让父级的 div 在 bootstrap 中保持水平居中，这样就永远不会出现不均匀分布的边距。左边和右边的边距应该始终相同。代码在这里(忽略clear div，它只是帮助父级 float ，所以井延伸到父级):

/* Some CSS to make the result easier to follow */
.parent {
  background-color: white;
  outline: 1px solid black;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="well" style="padding: 2em 0;">
  <div class="profile-exams">
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div>
    <div class="parent" style="float: left; width: 200px" margin="10px;">parent div </div>
    <div class="clear" style="clear: both;"></div>
  </div>
</div>

问题是我无法设置“profile-exams”的静态宽度，因为如果其中有 2、3 或 5 个框，它会有所不同。但如果我不能定义宽度，它就不会居中。

Answer 1

我不确定这是否是您想要的，但它是:

.profile-exams {
  text-align: center;
}
.parent {
  text-align: left;
/* These lines aren't necessary, but just to make the result easier to follow */
  background-color: white;
  outline: 1px solid black;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="well" style="padding: 2em 0;">
  <div class="profile-exams">
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div>
    <div class="parent" style="display: inline-block; width: 200px" margin="10px;">parent div </div>
    <div class="clear" style="clear: both;"></div>
  </div>
</div>

CodePen