Div需要居中

Question

看到我用红色箭头标记的空白区域，我希望这些div居中。但它向左浮动。我将所有这些div放到了middleBox div中，在中间框中我设置了text-align: center，但没有任何效果。

帮帮我们

我的HTML

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加

display: flex; 
justify-content: center;

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您使用的是boostrap 4，那么将justify-content-md-center类添加到div row类可以完成这项工作。但好像你正在使用bootstrap 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>

Answer 3

你可以使用flex

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

甚至更好，你可以使用网格

#middleBox {
  display: grid; 
  grid-template-columns: repeat(4, 100px);
  grid-gap: 15px;
  justify-content: center;
}

.box {
    background-color: #EEEEEE;
    text-align: center;
    height: 100px;
    width: 100%;
}

<div class="container">
  
            <div id="middleBox">
                    <div id="groupInsurance" class="box"></div>
                    <div id="lifeInsurance" class="box"></div>
                    <div id="dentalInsurance" class="box"></div> 
                    <div id="replacementInsurance" class="box"></div>
            </div>
            
 </div>

Answer 4

我会做那样的事情：

div {
  border: 1px solid black;
}

#middleBoxMargin {
  margin-top: 80px;
}

#middleBox {
  display: flex;
  justify-content: center;
}

#middleBox > div {
  background-color: #EEEEEE;
  text-align: center;
  height: 145px;
  width: 20%;
  margin: 5px 10px;
}

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

请注意，CSS较短，而且html中的某些类现在没用了。