如何在不将内部文本居中对齐的情况下居中对齐引导卡？答案

【问题标题】：How can I center align bootstrap cards without center aligning the text inside?如何在不将内部文本居中对齐的情况下居中对齐引导卡？
【发布时间】：2021-07-28 22:28:48
【问题描述】：

我正在使用 bootstrap 为他们网站上的卡片提供的代码，但如果不对齐卡片中的文本，似乎无法将卡片居中对齐到我的页面。

这就是我现在拥有的 --> https://i.imgur.com/f06m0Qc.png

<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>

我想要实现的风格是这样的 --> https://i.imgur.com/PaonbTR.png

现在不用担心样式，因为我可以在 CSS 中更改它。

【问题讨论】：

标签： css html bootstrap-4

【解决方案1】：

将您的代码放入一个 div 并添加一个类名，例如“centered” 您的 CSS 可能如下所示：

.centered {
    margin-right:auto; 
    margin-left:auto ; 
}

【讨论】：

刚试了一下，好像不行:(还是一样的问题

【解决方案2】：

请检查以下链接。希望这有帮助。谢谢

http://jsfiddle.net/3vxtw786/777

我添加了一个带有外部类的父级潜水，并提供了dispaly: flex 和justify-content:center。这将使所有的潜水都集中在中心

下面是您的参考链接。 https://www.w3schools.com/cssref/css3_pr_justify-content.asp

【讨论】：