父引导行内的中心 div [重复]

Posted 2023-03-05

【中文标题】父引导行内的中心 div [重复]

【英文标题】：Center div inside parent bootstrap row [duplicate]

【发布时间】：2018-08-15 16:29:07

【问题描述】：

在下面的示例https://codepen.io/centem/pen/GQVGmw 中，我尝试使用 .centered 类将其中包含数字的 div 居中，但它不居中。我如何将它们居中以使它们位于行的中间而不是左侧？

CSS：

.centered 
  margin: 0 auto;

DIV：

<div class="row">
  <div id="83" class="square centerd">83</div>
  <div id="84" class="square centered">84</div>
  <div id="85" class="square centered">85</div>
</div>

【问题讨论】：

在行类中添加justify-content-center，这样你就有了row justify-content-center

谢谢 Temani！成功了！

我还建议您阅读以下内容：getbootstrap.com/docs/4.0/utilities/flex 您会发现做您想做的所有需要​​的课程

【参考方案1】：

简单：

<div class="row justify-content-center">
  <div id="83" class="square centerd">83</div>
  <div id="84" class="square centered">84</div>
  <div id="85" class="square centered">85</div>
</div>