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

Question 1

<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中，我将仅使用中心块，但这不是BS4中的选项。有什么建议吗？

Question 2

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

展开摘要

如果要居中的内容是block或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）时，第二种解决方案会出现问题，尤其是当父对象具有视口宽度时，特别是因为它不可能水平滚动到内容的开头（左键-最）。
因此，当要居中的内容可能变得比可用父级宽度宽并且所有内容都应可访问时，请不要使用它。

Question 3

用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-width-content

Question 4

这是关闭表单组后在Bootsrap表单中以按钮为中心的完整HTML：

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

Question 5

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

要将水平边距设置为自动，可以使用mx-auto。所述m指余量和x将参考x轴（左+右）和auto将参考设定。因此，这会将左页边距和右页边距设置为“自动”设置。浏览器将平均计算边距并使元素居中。该设置仅适用于块元素，因此需要添加display：block，并且使用bootstrap实用程序通过完成d-block。

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

您可以根据此答案考虑所有浏览器完全支持自动边距设置浏览器对边距的支持：自动，因此可以安全使用。

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

Question 6

使用text-center类在父容器的引导4

Question 7

对我有用的是（将“ css / style.css”修改为您的css路径）：

头HTML：

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

正文HTML：

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

CSS：

.mycentered-text {
    text-align:center
}

Question 8

对于折叠的导航栏中的按钮，上面没有任何内容对我有用，因此在我的css文件中，我做了.....

.navbar button {
    margin:auto;
}

而且有效！！

Question 9

您也可以只包装带有文本中心属性的H类或P类