卡体中心（引导程序）[重复]

Posted 2023-03-05

【中文标题】卡体中心（引导程序）[重复]

【英文标题】：Center in Card body (Bootstrap) [duplicate]

【发布时间】：2021-08-09 03:35:25

【问题描述】：

我的卡体有一个小问题，我想把两列都放在中间，如图所示，与按钮相比，它有点在左边......我在引导程序中尝试了一些类，但是我似乎找不到合适的...希望你能帮助我 [在艾舍伍德之后编辑]

所以我尝试放置 text-center 但我不知道为什么它的工作方式与 sn-p 不同...

<div class="card">
          <div class="card-body ">
            <h5 class="card-title text-center">Jours</h5>
            <div>
              <div class="d-flex justify-content-center">
                <div class="col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">jour</label>
                  </div>
                </div>
                <div class=" col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">jour</label>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <button type="button" class="btn btn-primary">Valider</button>
            </div>
          </div>

【参考方案1】：

如果我理解正确，请在每列中包含text-center：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="card">
  <div class="card-body ">
    <h5 class="card-title text-center">Jours</h5>
    <div>
      <div class="d-flex justify-content-center">
        <div class="col-sm-6 mb-3 text-center">
          <fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
          <div *ngFor="let jour of semaine" class="ms-3 form-check">
            <input class="form-check-input" type="checkbox" [value]="jour">
            <label class="form-check-label d-inline-flex">jour</label>
          </div>
        </div>
        <div class=" col-sm-6 mb-3 text-center">
          <fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
          <div *ngFor="let jour of semaine" class="ms-3 form-check">
            <input class="form-check-input" type="checkbox" [value]="jour">
            <label class="form-check-label d-inline-flex">jour</label>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center">
      <button type="button" class="btn btn-primary">Valider</button>
    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.5/utilities/text/#text-alignment

【讨论】：

谢谢，但它不像sn-p那样工作...我有文本在中心但不是垂直的，复选框仍然在同一个地方...

看不到的东西我无能为力。您从答案中取出了有效的 sn-p 。如果你恢复它并让它显示问题，也许我们可以弄清楚。