获取按钮以在 Bootstrap 卡页脚中对齐中心

Question

我正在使用 Bootstrap 5.1.3 并尝试让按钮在卡片页脚中居中。这是我正在使用的代码：

CSS

.btnStandard {
    min-width: 10vw;
}

HTML

<div class="card-footer justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

我试过的任何方法都不能让我将按钮置于卡片页脚的中央。有什么想法吗？

Answer 1

给你...你忘了添加d-flex。

改变这个...

<div class="card-footer justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

...至此。

<div class="card-footer d-flex justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

Answer 2

也试试这个：

<div class="card-footer mx-auto justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify- 
      content-center btnStandard">
      <div class="col-10 text-center">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i> 
      </div>
   </button>
</div>

获取按钮以在 Bootstrap 卡页脚中对齐中心

Getting button to align center in Bootstrap card footer

html

css

bootstrap-5

CSS

HTML