Div needs to be centered

This question already has an answer here:

Center a column using Twitter Bootstrap 3 28 answers

How do you get centered content using Twitter Bootstrap? 22 answers

---

If you are using boostrap 4, adding a class justify-content-md-center to the div with row class would do the job. But seems like you are using bootstrap 3, so you can use the offset class. Try updating your code this way.

<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

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

---

我会做这样的事情：

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>

链接地址: http://www.djcxy.com/p/75914.html

上一篇: 正确的行属性用于居中框

下一篇: Div需要被集中