html - 你如何在 bootstrap 中将文本居中放置在卡片中？

<分区>

我在 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;
}

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

最佳答案

您正在寻找这样的东西吗？使用 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>

关于html - 你如何在 bootstrap 中将文本居中放置在卡片中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58599455/

上一篇：html - 如何在 Shiny 和 Shinydashboard 中自定义 HTML 文本和 verbatimTextOutput 之间的空间

下一篇：javascript - 使用 css 或 js 强制调整字体高度

相关文章：

javascript - 使页面滚动并动态加载元素

html - CSS:大水平滚动条的小页脚问题

html - 如何减少日期选择器中文本输入的大小？

css - 如何创建覆盖整个可见垂直空间(或过渡到实体？)的线性渐变

javascript - Canvas arcTo() 方法

jquery - 如何使用 jQuery 切换我的 CSS 样式表？

html - 容器 div 未拉伸(stretch)到父级的全高

javascript - Bootstrap 4 多选下拉菜单

javascript - 在 Retina iPhone 上正确设置设备宽度和比例？ CSS

html - 如何覆盖特定页面中的CSS重要规则