Bootstrap 4，如何使按钮居中对齐？

Question

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

无法弄清楚如何使这个按钮居中。在 BS 3 中，我只会使用 center-block，但这不是 BS4 中的选项。有什么建议吗？

原文由 bbennett36 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 Bootstrap 4 中，应该使用 text-center 类来对齐 inline-blocks 。

注意： text-align:center; 在应用到父元素的自定义类中定义，无论您使用的是何种 Bootstrap 版本，都可以正常工作。这正是 .text-center 适用的。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

---

如果要居中的内容是 块 或 flex （不是 inline- ），可以使用 flexbox 将其居中：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

…适用于 display: flex; justify-content: center 父母。

注意： 不要使用 .row.justify-content-center 而不是 .d-flex.justify-content-center ，因为 .row 在某些响应间隔上应用负边距，这会导致意外的水平滚动条 .row 是 .container 的直接子代，它在正确的响应间隔上应用横向填充来抵消负边距）。如果您必须使用 .row ，无论出于何种原因，请使用 .m-0.p-0 覆盖其边距和填充，在这种情况下，您最终会得到与 .d-flex 几乎相同的样式.

重要提示： 当居中内容（按钮）超过父级（ .d-flex ）的宽度时，第二种解决方案会出现问题，尤其是当父级具有视口宽度时，特别是因为它无法水平滚动到内容的开始（最左边）。

因此，当要居中的内容可能变得比可用的父宽度更宽并且所有内容都应该可以访问时，不要使用它。

原文由 tao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

用引导程序试试这个

代码：

 <div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

关联：

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

原文由 abo-jwad22 Ahmd 发布，翻译遵循 CC BY-SA 4.0 许可协议