将一组 Bootstrap DIV 居中

Posted 2023-03-29

【中文标题】将一组 Bootstrap DIV 居中

【英文标题】：Centering a group of Bootstrap DIVs

【发布时间】：2020-09-11 11:47:07

【问题描述】：

如何将一组 DIV 居中在容器类中，但不将每一行居中？ 在下面的示例中，可以看到灰色 div 右侧区域的边距，这使得组不会显示在容器的中心。使用 justify-content-center 也会将我不想要的最后一个未配对行居中。这个想法是有一个负责任的 div 组。请指教：

<div class="container  bg-success">
  <p>centering divs</p>
  <div class="p-0  m-0 bg-dark d-flex flex-row flex-wrap">  
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
  </div>
</div>

【问题讨论】：

除了最后一个必须左对齐的行之外，您希望所有行都有居中的项目吗？

【参考方案1】：

你可以在类属性中使用多个类，用空格分隔 <a class="c1 c2">aa</a> 和 text-align在你的 CSS 中这样

.center
text-align: center;

.left
text-align: left;
  

<div class="container  bg-success">
  <p>centering divs</p>
  <div class="p-0  m-0 bg-dark d-flex flex-row flex-wrap center">  
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary">Three</div>
    <div class="bg-danger">One</div>
    <div class="bg-warning">Two</div>
    <div class="bg-primary left">Three</div>
  </div>
</div>

【讨论】：

了解更多信息maxdesign.com.au/articles/multiple-classes

您知道text-center 和text-left 是BS 排版的一部分吗？我相信OP知道这一点。此外，它是一个硬编码的解决方案，实际上无法解决任何问题 - 如果在容器运行时附加了另外两个项目怎么办？我自己找不到纯 BS 解决方案。