引导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>

不知道如何将此按钮居中。在BS3中，我只使用中心块，但在BS4中，这不是一个选项。有什么建议吗？

Answer 1

通过使用bootstrap 4实用程序，您可以通过将水平边距设置为“自动”，使元素本身水平居中。

要将水平边距设置为自动，可以使用mx auto。m表示边距，x表示x轴（左-右），而auto表示设置。因此，这将把左边距和右边距设置为“自动”设置。浏览器将平均计算边距并将元素居中。该设置仅适用于块元素，因此需要添加display:block，并使用引导实用程序通过d-block完成。

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

根据这个答案，您可以考虑所有浏览器完全支持自动保证金设置。浏览器支持保证金：自动，所以使用起来很安全。

bootstrap4类text center也是一个很好的解决方案，但是它需要一个父包装器元素。使用自动边距的好处是，它可以直接在按钮元素本身上完成。

Answer 2

用bootstrap试试这个

<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-宽度内容

Answer 3

在bootstrap4中，应该使用文本中心类来对齐内联块。

注：文本对齐：居中 将起作用，无论您使用的引导版本如何。这正是所要做的。文本中心适用。

<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>