看到我用红色箭头标记的空白处，我想让这些div居中。但它在往左飘。我将所有这些div放置到middleBox div中，并在middleBox中设置了text-align:center，但没有任何效果。
帮帮我伙计们
我的HTML
null
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
text-align: center;
}
#groupInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#lifeInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#dentalInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#replacementInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div class="col-sm-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>null
添加
display: flex;
justify-content: center;
null
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
display: flex;
justify-content: center;
}
#groupInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#lifeInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#dentalInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}
#replacementInsurance {
background-color: #EEEEEE;
text-align: center;
height: 145px;
}<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div class="col-sm-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>
如果您使用的是boostrap 4，那么将一个类justify-content-md-center添加到具有row类的div中就可以完成这项工作。但您似乎在使用引导程序3，因此可以使用offset类。尝试以这种方式更新代码。
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div class="row" id="middleBox">
<div class="col-sm-2 col-sm-offset-2">
<div id="groupInsurance"></div>
</div>
<div class="col-sm-2">
<div id="lifeInsurance"></div>
</div>
<div class="col-sm-2">
<div id="dentalInsurance"></div>
</div>
<div class="col-sm-2">
<div id="replacementInsurance"></div>
</div>
</div>
</div>
</div>
</div>
您可以使用flex进行此操作
null
#middleBox {
display: flex;
justify-content:center
}
.col {
padding: 0 15px;
}
.box {
background-color: #EEEEEE;
text-align: center;
height: 100px;
width: 100px;
}<div class="container">
<div id="middleBox">
<div class="col">
<div id="groupInsurance" class="box"></div>
</div>
<div class="col">
<div id="lifeInsurance" class="box"></div>
</div>
<div class="col">
<div id="dentalInsurance" class="box"></div>
</div>
<div class="col">
<div id="replacementInsurance" class="box"></div>
</div>
</div>
</div>