Css 引导4，如何将按钮居中对齐？ {{job.job_title}

谷歌公司-{{job.location}

职位描述

发布：{{formattate（job.date_created）}

{{buttonext}}

---

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

使用引导4的父容器中的

文本中心
类
在引导4中，应使用
文本中心
类对齐内联块

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



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

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


提交
使用引导功能尝试此操作

代码：

btnText

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

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

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

提交

<>你可以考虑所有浏览器根据这个答案完全支持自动保证金设置，这样就可以安全使用。
bootstrap4类
text center
也是一个很好的解决方案，但是它需要一个父包装器元素。使用自动边距的好处是，它可以直接在按钮元素本身上完成。
对我有效的方法是（将“css/style.css”改编为css路径）：

标题HTML:

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

您也可以使用带有文本中心属性的H类或p类对收拢的导航栏中的按钮进行换行
所以在我的css文件中我做了

.mycentered-text {
    text-align:center
}

成功了
 完美答案。谢谢。如果你没有给出具体的答案，只是建议如何解决这个问题，请写在评论中。这对我来说很有效，使用基于Bootstrap 4的Core UI Pro admin templateNevermind，我只是很傻，把行放在列中，而不是列中。没有其他办法，甚至手动将样式提供给对象。但这是可行的。接受这个答案。只有这个解决方案有效，我不知道为什么，但这是事实
 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

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

.mycentered-text {
    text-align:center
}

.navbar button {
    margin:auto;
}