Bootstrap 4, How do I center-align a button?

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

Can't figure out how to center this button. In BS 3 I would just use center-block but that's not an option in BS4. Any advice?

505098 次浏览
小开

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

小开
最佳答案

在引导程序4中，应该使用 text-center类来对 < em > inline-block 。

注意: 在应用于父元素的自定义类中定义的 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>

如果要居中的内容是 区域或 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) ，特别是当父级有视窗宽度，特别是因为它使得不可能水平滚动到内容的开始(最左边)。
因此，当要居中的内容可能会变得比可用的父宽度更宽，并且所有内容都应该是可访问的时候，不要使用它。

小开

下面是我使用 Bootsrap 表单中按钮居中的完整 HTML 结束表格后-小组:

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

试试这个引导程序

密码:

<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

小开

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

要将水平边距设置为 auto，可以使用 mx-auto。m代表边距，x代表 x 轴(左 + 右) ，auto代表设置。因此，这将设置左边距和右边距的“自动”设置。浏览器将计算边距并将元素居中。这个设置将只对块元素起作用，因此 display: block 需要添加，并且通过引导实用程序，这是由 d-block完成的。

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

你可以考虑所有的浏览器完全支持自动边距设置根据这个答案 对页边距的浏览器支持: auto，所以它是安全的使用。

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

小开

对我有效的方法是(使“ 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>

传真:

.mycentered-text {
text-align:center
}
小开

您也可以使用带有文本中心属性的 H 类或 P 类进行换行

小开

在一个崩溃的导航栏按钮没有工作，以上为我 所以在我的 CSS 文件里，我... ..。

.navbar button {
margin:auto;
}

成功了！

小开

你需要用父元素来包装你的按钮:

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

很简单

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

提交答案