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 中的选项。有什么建议吗？

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>

---

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

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

Answer 3

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

您可以根据这个答案Browser support for margin: auto考虑所有浏览器完全支持自动边距设置，因此使用安全。

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

Answer 4

这是我用来在 Bootsrap 表单中按按钮居中的完整 HTML 关闭表单组后：

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

Answer 5

在 Bootstrap 4 的父容器中使用 text-center 类

Answer 6

对于折叠的导航栏中的按钮，上面没有对我有用 所以在我的css文件中我做了.....

.navbar button {
    margin:auto;
}

成功了！！

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

Answer 8

问题是您需要将按钮包装在父元素中：

   ` <div class="text-center">
              <a href="./templatemo_558_klassy_cafe/index.html" class="btn btn- 
   outline-light me-5 ">Lavande Restaurant PH</a>`
             </div>

Answer 9

你也可以只用带有 text-center 属性的 H 类或 P 类包装

Answer 10

很简单

<div class="align-self-center mx-auto">
              <button type="button" class="btn btn-primary">
                  Click Me!
              </button>
 </div>