如何使用 justify-content 或 align-self 来居中？ （仅限引导程序）

Posted 2023-03-03

【中文标题】如何使用 justify-content 或 align-self 来居中？ （仅限引导程序）

【英文标题】：How do I use justify-content or align-self to center this? (Bootstrap only)

【发布时间】：2021-09-23 23:05:07

【问题描述】：

这是我的代码，由于某种原因，我无法将其居中。我已经为每一行和每一列类尝试了 justify-content 和 align-items，但它不起作用。 我使用的是 4.6 Bootstrap 的 CDN。

这个：

链接 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 完整性="sha384-B0vP5xmATw1+ K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"

我需要将 4 个 lorem ipsum 置于断点（md、lg）的中心，谢谢！

<section>    
  <div class="container vh-100">
  <div class="row row-cols-1 row-cols-md-2 bg-info">
  
  <div class="col col-md-6 col-lg-12"><h3>My Values</h3></div>
  
  <div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
  <div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
  </div>
  
  </div>
  
</div>
</section>

【参考方案1】：

您可以利用bootstrap框架提供的默认类.text-center，将其添加到父元素中，使所有文本居中。

更改此行，项目将居中对齐。

<section class="text-center"> 

【参考方案2】：

<section>    
<div class="container vh-100">
<div class="row row-cols-1 row-cols-md-2 bg-info text-center">

<div class="col col-md-6 col-lg-12"><h3>My Values</h3></div>

<div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
<div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
</div>

</div>

</div>
</section>

将文本中心类添加到<div class="row row-cols-1 row-cols-md-2 bg-info text-center">

【参考方案3】：

您没有尝试将类“row row-cols-1”类“d-flex”添加到容器中吗？

【讨论】：

然后添加诸如“justify-content”和“align-items”之类的类