保持div水平居中

Question

我有很好的引导程序，并且内部有一个div，其元素名为＆＃34; parent＆＃34;。父母彼此左右浮动。如果div大到足以容纳4个父母，那么它将连续适合4个父母而其他人则适合第二个等等，如果它足够大以适合三个它将适合三个一排......（大小取决于屏幕宽度）。当div为3个半父母或4和20px或类似的东西时出现问题。然后左边的地方充满了边距，如图所示：

我如何保持div与父母在引导程序中水平居中，因此永远不会有不均匀分布的边距。保证金在左侧和右侧应始终相同。代码在这里（忽略明确的div，它只是帮助父母的浮动，所以井与父母一起延伸）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题在于我无法设置＆＃34; profile-exams＆＃34;的静态宽度，因为如果内部有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