CSS Bootstrap 4，如何将按钮居中对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41664991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4, How do I center-align a button?
提问by bbennett36
<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?
无法弄清楚如何将这个按钮居中。在 BS 3 中，我只会使用中心块，但在 BS4 中这不是一个选项。有什么建议吗？
回答by tao
In Bootstrap 4 one should use the text-centerclass to align inline-blocks.
在 Bootstrap 4 中，应该使用text-center类来对齐inline-blocks。
NOTE: text-align:center;defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-centerapplies.
注意：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>If the content to be centered is blockor flex(not inline-), one could use flexbox to center it:
如果要居中的内容是block或flex(not 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>... which applies display: flex; justify-content: centerto parent.
...适用display: flex; justify-content: center于父母。
Note:don't use .row.justify-content-centerinstead of .d-flex.justify-content-center, as .rowapplies negative margins on certain responsiveness intervals, which results into unexpected horizontal scrollbars (unless .rowis a direct child of .container, which applies lateral padding to counteract the negative margin, on the correct responsiveness intervals). If you must use .row, for whatever reason, override its margin and padding with .m-0.p-0, in which case you end up with pretty much the same styles as .d-flex.
注意：不要使用.row.justify-content-center代替.d-flex.justify-content-center，因为.row在某些响应间隔上应用负边距，这会导致意外的水平滚动条（除非.row是 的直接子级.container，它在正确的响应间隔上应用横向填充来抵消负边距）。如果您必须使用.row，无论出于何种原因，请使用 覆盖其边距和填充.m-0.p-0，在这种情况下，您最终会得到与.d-flex.
Important note:The second solution is problematic when the centered content (the button) exceeds the width of the parent (.d-flex) especially when the parent has viewport width, specifically because it makes it impossible to horizontally scroll to the start of the content (left-most).
So don't use it when the content to be centered could become wider than the available parent width and all content should be accessible.
重要提示：当居中的内容（按钮）超过父级 ( .d-flex)的宽度时，第二个解决方案会出现问题，尤其是当父级具有视口宽度时，特别是因为它无法水平滚动到内容的开头（左-最多）。
因此，当要居中的内容可能变得比可用的父宽度更宽并且所有内容都应该可以访问时，请不要使用它。
回答by abo-jwad22 Ahmd
Try this with bootstrap
用引导程序试试这个
CODE:
代码：
<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
https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content
回答by Jaskaran Singh
Here is the full HTML that I use to center by button in Bootsrap form after closing form-group:
这是在关闭表单组后我用来在 Bootsrap 表单中按按钮居中的完整 HTML：
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
回答by Serginho
Use text-centerclass in the parent container for Bootstrap 4
text-center在 Bootstrap 4 的父容器中使用类
回答by Bob Siefkes
With the use of the bootstrap 4 utilities you could horizontally center an element itself by setting the horizontal margins to 'auto'.
使用 bootstrap 4 实用程序，您可以通过将水平边距设置为“自动”来水平居中元素本身。
To set the horizontal margins to auto you can use mx-auto. The mrefers to margin and the xwill refer to the x-axis (left+right) and autowill refer to the setting. So this will set the left margin and the right margin to the 'auto' setting. Browsers will calculate the margin equally and center the element. The setting will only work on block elements so the display:block needs to be added and with the bootstrap utilities this is done by d-block.
要将水平边距设置为自动，您可以使用mx-auto. them指的是边距，thex将指的是 x 轴（左+右），auto并将指的是设置。因此，这会将左边距和右边距设置为“自动”设置。浏览器将平均计算边距并使元素居中。该设置仅适用于块元素，因此需要添加 display:block 并且使用引导实用程序，这是由d-block.
<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>
You can consider all browsers to fully support auto margin settings according to this answer Browser support for margin: autoso it's safe to use.
您可以根据此答案浏览器支持边距：自动考虑所有浏览器完全支持自动边距设置，因此可以安全使用。
The bootstrap 4 class text-centeris also a very good solution, however it needs a parent wrapper element. The benefit of using auto margin is that it can be done directly on the button element itself.
bootstrap 4 类text-center也是一个很好的解决方案，但是它需要一个父包装元素。使用自动边距的好处是可以直接在按钮元素本身上完成。
回答by CartoonZzy
for a button in a collapsed navbar nothing above worked for me so in my css file i did.....
对于折叠的导航栏中的按钮，上面没有对我有用，所以在我的 css 文件中我做了.....
.navbar button {
margin:auto;
}
and it worked!!
它奏效了！！
回答by Rexcirus
What worked for me was (adapt "css/style.css" to your css path):
对我有用的是（使“css/style.css”适应您的 css 路径）：
Head HTML:
头部 HTML：
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
Body HTML:
正文 HTML：
<div class="container">
<div class="row">
<div class="mycentered-text">
<button class="btn btn-default"> Login </button>
</div>
</div>
</div>
Css:
css：
.mycentered-text {
text-align:center
}
回答by Brad
you can also just wrap with an H class or P class with a text-center attribute
您也可以使用带有 text-center 属性的 H 类或 P 类包装
