如何在引导程序中将最后两张卡居中？答案

【问题标题】：How to center last two cards in bootstrap?如何在引导程序中将最后两张卡居中？
【发布时间】：2021-04-16 11:05:11
【问题描述】：

我使用引导程序以角度编写应用程序。我希望最后两张牌在中间，而不是在左边。现在看起来最后一张卡不见了。我想纠正它。怎么做？

html代码：

<div class="container" style="padding-top:1.1cm">
    <div class="card-columns">
  
      <div class="card text-center" [routerLink]="['/special/arrangements-salon']">
        <div class="card-body">
          <img [src]="salon" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">salon</h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center" [routerLink]="['/special/arrangements-study']">
        <div class="card-body">
          <img [src]="study" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">gabinet</h5>
          </label>
        </div>
      </div>
        
      <div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
        <div class="card-body">
          <img [src]="bedroom" height="100" width="100"> <br><label>
            <h5 style="padding-top:6mm">sypialnia
            </h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center"  [routerLink]="['/special/arrangements-kitchen']">
        <div class="card-body">
          <img [src]="kitchen" height="100" width="100"> <br><label>
            <h5 style="padding-top:6mm">kuchnia
            </h5>
          </label>
        </div>
      </div>
  
      <div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
        <div class="card-body">
          <img [src]="bathroom" height="100" width="100"><br><label>
            <h5 style="padding-top:6mm">łazienka</h5>
          </label>
        </div>
      </div>
  
    </div>
  </div>

【问题讨论】：

卡片列以砖石样式对齐卡片。
啊，那么你不能对齐最后两个中心，因为它使用 css 列而不是 flex - 这意味着卡片将保留在它们的列中。您可能想将其改回 row 并使用 justify-content-center 类，尤其是因为您的卡片高度相同，您似乎不需要砖石

标签： html angular bootstrap-4 angular-ui-bootstrap

【解决方案1】：

将 d-flex align-items-center justify-content-center 添加到 parent => card-columns div 或者您可以将 mx-auto 添加到最后一个 div

  
        
<div class="container" style="padding-top:1.1cm">
        <div class="card-columns d-flex align-items-center justify-content-center">
      
          <div class="card text-center" [routerLink]="['/special/arrangements-salon']">
            <div class="card-body">
              <img [src]="salon" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">salon</h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center" [routerLink]="['/special/arrangements-study']">
            <div class="card-body">
              <img [src]="study" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">gabinet</h5>
              </label>
            </div>
          </div>
            
          <div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
            <div class="card-body">
              <img [src]="bedroom" height="100" width="100"> <br><label>
                <h5 style="padding-top:6mm">sypialnia
                </h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center"  [routerLink]="['/special/arrangements-kitchen']">
            <div class="card-body">
              <img [src]="kitchen" height="100" width="100"> <br><label>
                <h5 style="padding-top:6mm">kuchnia
                </h5>
              </label>
            </div>
          </div>
      
          <div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
            <div class="card-body">
              <img [src]="bathroom" height="100" width="100"><br><label>
                <h5 style="padding-top:6mm">łazienka</h5>
              </label>
            </div>
          </div>
      
        </div>
      </div>

【讨论】：

【解决方案2】：

Bootstrap card-columns 使用 CSS 多列，出于各种原因，它是 not really possible 将项目居中或以不同方式对齐行。

不要使用card-columns，而是使用网格 (row > col-*)，但您应该注意，这不会为您提供砖石布局或从上到下的顺序。

【讨论】：