让div保持水平居中

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

Margin on right

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

/* 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个框，它会发生变化。但如果我无法定义宽度，它不会居中。

来源

2017-05-30 csserrs

用bootstrap格列 – ZimSystem

如何将我用它做网格列？ @ZimSystem – csserrs

@csserrs我可以用jsfiddle来生成图像中的输出吗？ –

我不知道这是否是你想要的，但在这里它是：

.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

来源

2017-05-30 19:31:55

谢谢你的回应，但文本对齐中心似乎并没有做伎俩..我会张贴片段，但网站是动态的，我将不得不编辑很长时间，因为它包含许多Django变量 – csserrs

好吧，将尝试修复该问题 –

@csserrs文本对齐中心不工作的方式？ –

让div保持水平居中

回答

相关问题