如何将所有内容集中在 Bootstrap 卡中？答案

【问题标题】：How can I centre everything in a Bootstrap card?如何将所有内容集中在 Bootstrap 卡中？
【发布时间】：2022-02-02 23:40:33
【问题描述】：

我在尝试编写学期项目的代码时遇到了问题。我试图将所有这些内容集中在引导卡的中间，但它似乎无法正常工作:(

如果有人可以帮助我，我将不胜感激！

如果我能把卡片高度提高一点。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card mt-5 container p-5 card-w ">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600" class="card-img" alt="apples">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
        <p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
        <div class="container d-flex alignmentcard">
          <div class="d-flex mx-3">
            <a href="#" class="btn btn-white">-</a>
            <p class="pt-2 lead">1</p>
            <a href="#" class="btn btn-white">+</a>
            <button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
          </div>
        </div>
        <div class="container pt-4">
          <p>
            <a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                          More details
                        </a>
          </p>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

两个选项：Text alignment 或 flex utilities。你试过什么？
我尝试了文本对齐，但它只使文本居中，当我尝试使用 flex 实用程序时，当有很多组件居中时我会感到困惑:(
好吧，你想要什么并不完全清楚，因为你有不同的布局用于移动和更大的屏幕。请更详细地修改。

标签： html css bootstrap-5

【解决方案1】：

尝试使用<center></center> 标记从头到尾包裹你的div 的每一部分。之后，你会得到这样的东西：

<center>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card mt-5 container p-5 card-w ">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600" class="card-img" alt="apples">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
        <p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
        <div class="container d-flex alignmentcard">
          <div class="d-flex mx-3">
            <a href="#" class="btn btn-white">-</a>
            <p class="pt-2 lead">1</p>
            <a href="#" class="btn btn-white">+</a>
            <button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
          </div>
        </div>
        <div class="container pt-4">
          <p>
            <a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                          More details
                        </a>
          </p>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</center>

【讨论】：