Div需要居中[重复]
看到我用红色箭头标记的空白处，我想让这些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
共有3个答案
您可以使用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>
如果您使用的是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>
添加
display: flex;
justify-content: center;
null
css prettyprint-override">#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>-
问题内容： 我有一个非常简单的问题，但似乎无法解决。我在div中有一个表格，这是主要元素。现在，我在表内有一个td标签，其宽度和高度设置为iphone屏幕尺寸。现在，我基本上要将该表及其td单元格放在div标签的中心，以便“屏幕”将在任何浏览器窗口中居中。我怎么做？ 用表替换该div解决了我的问题，但我想改用div。 谢谢 问题答案： 试试这个，我做这个代码-演示在这里，非常简单的代码（我仅对IE
-
问题内容： 我在div（）中有一个，并且我希望此图像恰好位于div的中间，但是我尝试的任何方法都无效 谢谢你的帮助！ 问题答案： 此处发布的每个解决方案都假定您知道的尺寸， 这不是常见的情况。 同样，将尺寸植入解决方案中也是痛苦的。 只需设置： 要么 就这样。 请注意，您还必须为external设置一个缩写。
-
问题内容： 我试图在此页面上将新闻滑块（位于div底部容器中）居中： http://www.luukratief- design.nl/dump/parallax/index.html 我已经有了 仍然不起作用。 有什么建议么？ 问题答案： 在仅中心元素的 在线内容 ，而不是元素本身。 如果它是一个 块_元素（一个是），则需要设置；否则，如果它是一个[ _内联_元素]，则需要在 _其父 元素上设置
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。
-
结构是这样的：
-
问题内容： 我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin- right设置为auto。不起作用，它的作用就像是左边距为0（默认值）。 有人知道我的错误吗？ 问题答案： SVG默认为内联。添加到它，然后将按预期工作。