Question

我在Bootstrap 4中为卡编写了代码。现在，我想将卡内的所有文本居中，但我找不到解决方法。

我试图将整个部分“以文本为中心”。我还尝试使用“ d-flex”为整个行/容器的内容辩护，而这些行列/容器也不起作用。

这是我的代码：

<section id="jobs">
    <!--Employing cards-->
    <div class="container-fluid container-fluid-shorter py-4 bg-white">

        <!--Assistant card-->

        <div class="row">
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card">
                    <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">asistentka</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
                        <a href="assistant.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 my-3">
                <div class="card">
                    <img src="images/developer.jpg" alt="developer" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">developer</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
                        <a href="employerform.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 my-3 mx-auto">
                <div class="card">
                    <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">obchodník</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
                        <a href="employerform.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End of employing cards section-->
</section>

.container-fluid-shorter{
    max-width: 90rem;
}

我在做什么错？感谢任何人。

Answer 1

您追求的是这样吗？使用flex然后justify-content-center

.card-body {
  flex-direction: column;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="jobs">
  <!--Employing cards-->
  <div class="container-fluid container-fluid-shorter py-4 bg-white">

    <!--Assistant card-->

    <div class="row">
      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">

            <h4 class="card-title text-capitalize">asistentka</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
              <a href="assistant.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/developer.jpg" alt="developer" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">
            <h4 class="card-title text-capitalize">developer</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 my-3 mx-auto">
        <div class="card">
          <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">

            <h4 class="card-title text-capitalize">obchodník</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End of employing cards section-->
</section>

您如何在引导程序中将文本居中放置在卡片中？

1 个答案: