让div保持水平居中

Question

我有bootstrap，并且里面有一个名为“parent”的元素。父母彼此向左移动。如果div大到足以容纳4个父母，则它将适合4个父母成对排列，其他适合第二个等等，如果它足够大以适合三个，则它将适合三排成一排......（尺寸取决于屏幕宽度）。问题出现在div大于3父母或4和20px或类似的东西时。然后这个地方左边是充满了保证金，你可以在图片中看到：

我怎么能保持股利与父母内部引导水平居中很好，所以绝不会有分布不均保证金。在左侧和右侧边缘应始终相同。该代码是在这里（忽略明确的股利，它只是用浮法父母的帮助，所以也与家长绵延）：

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

的问题是，我不能设置静态“轮廓考试”的宽度，因为如果内部有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