如何使用 justify-content 或align-self 使其居中？

Question

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

这个：

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/css/bootstrap.min.css"integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 +l" crossorigin="匿名"

我需要 4 个 lorem ipsums 位于断点（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>

Answer 1

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

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

<section class="text-center"> 

Answer 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">

Answer 3

您没有尝试过添加类为“row row-cols-1”类“d-flex”的容器吗？