Html Bootstrap 4 中心块无法居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38251191/
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 center-block unable to center
提问by ApathyBear
I have the following bootstrap html code (its JSX hence the classNamebut the idea is the same):
我有以下引导程序 html 代码（它的 JSX 因此className但想法是相同的）：
<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
<button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
<button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
</div>
I am trying to center this code with either bootstrap center-block or with CSS but cannot seem to get it to work:
我正在尝试使用引导程序中心块或 CSS 将此代码居中，但似乎无法使其正常工作：
The green bar highlights the div toggleView.
绿色条突出显示 div toggleView。
The only css I am using is the following:
我使用的唯一 css 如下：
.toggleView {
padding: 20px;
}
Why can I not center this button group?
为什么我不能将此按钮组居中？
回答by Zim
btn-grouphas display:inline-blockso you would use text-centerin the parent container..
btn-group有display:inline-block所以你会text-center在父容器中使用..
http://codeply.com/go/hyUYkUrtRN
http://codeply.com/go/hyUYkUrtRN
NOTE: In Bootstrap 4, center-blockis now mx-auto, representing margin: 0 auto;for centering display:blockelements. Bootstrap 4 now has a d-blockclass too so an inline element can be made display:block like this..
注意：在 Bootstrap 4 中，center-block现在是mx-auto，代表margin: 0 auto;居中display:block元素。Bootstrap 4 现在也有一个d-block类，因此可以像这样显示内联元素：块。
<img src=".." class="d-block mx-auto" >
<img src=".." class="d-block mx-auto" >
回答by Salvador Cervantes
Bootstrap 4 (as of 2017-08-16) will use d-blockand to center you use mx-auto.
Bootstrap 4（截至 2017 年 8 月 16 日）将使用d-block并居中您使用mx-auto.
回答by Greg Gum
Bootstrap 4 does not have center-blockInstead, I use d-block mx-autowhich sets display to block, and left and right margins to auto.
Bootstrap 4 没有center-block相反，我使用d-block mx-autowhich 将显示设置为阻止，将左右边距设置为自动。
