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>

无法弄清楚如何将此按钮居中。在BS 3中，我只使用中心块，但这不是BS4中的选项。有什么建议吗？

Answer 1

在Bootstrap 4中，您应该使用text-center类来对齐内联块。

注意：无论您使用的Bootstrap版本如何，在应用于父元素的自定义类中定义的text-align:center;都将起作用。这正是.text-center适用的原因。

＆＃13;

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

＆＃13;

Answer 2

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

ionic cordova run android

Answer 3

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

Answer 4

尝试使用引导程序

代码：

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

LINK：

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

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

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

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

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

Answer 9

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

Answer 10

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

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

Bootstrap 4，如何对齐按钮？

10 个答案:

代码：

LINK：