html - div需要居中

标签 html css twitter-bootstrap twitter-bootstrap-3

<分区>

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

大家帮帮我

我的 HTML

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

最佳答案

添加

display: flex; 
justify-content: center;

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

关于html - div需要居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50074042/

上一篇：css - 对齐 flexbox 内的元素

下一篇：html - 使文本在底部 div 对齐

相关文章：

html - 在链接鼠标悬停事件上显示文本

html - 文本在 1cm x 1cm 单元格中居中

html - flexbox 没有采用正确的宽度 Angular

html - li 中的 float div 在 IE 中无法正确显示

twitter-bootstrap - 使 Modal Box Twitter Bootstrap 上的关闭按钮更大

javascript - 在指定时间临时更改 HTML 中的占位符

html - 悬停时的图像与左侧的图像重叠，但不与右侧的图像重叠

javascript - 带有默认应用程序 CSS 的 TinyMCE 内容

javascript - 设置多个选择菜单选项的样式

javascript - 使用 jquery 在按钮单击上添加文本到简单表单