Bootstrap 4中心块无法居中

Posted 2023-03-05

【中文标题】Bootstrap 4中心块无法居中

【英文标题】：Bootstrap 4 center-block unable to center

【发布时间】：2016-11-10 02:38:02

【问题描述】：

我有以下引导 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>

我正在尝试使用引导程序中心块或 CSS 将这段代码居中，但似乎无法使其工作：

绿色条突出显示 div toggleView。

我使用的唯一 css 如下：

.toggleView 
    padding: 20px;

为什么我不能让这个按钮组居中？

【参考方案1】：

btn-group 具有 display:inline-block，因此您将在父容器中使用 text-center..

http://codeply.com/go/hyUYkUrtRN

注意：在 Bootstrap 4 中，center-block 现在是 mx-auto，代表 margin: 0 auto; 用于居中 display:block 元素。 Bootstrap 4 现在也有一个 d-block 类，因此可以将内联元素设置为 display:block 像这样..

<img src=".." class="d-block mx-auto" >

另见：Center the content inside a column in Bootstrap 4

【讨论】：

谢谢，这让我有点困惑，为什么它会起作用。你能多谈谈 display:inline-block 以及它实际在做什么以及 text-center 如何解决这个问题吗？

基本上center-block 只适用于display:block 元素

对于未来的读者来说，m-x-auto 似乎重命名为mx-auto fram alpha.5

我在 Bootstrap v4.0.0-alpha.6 中发现的。 mx-auto 只有两个值，margin-left: auto !important 和 margin-right: auto !important。垂直中产阶级对我有用。

【参考方案2】：

Bootstrap 4（截至 2017 年 8 月 16 日）将使用 d-block 并使用 mx-auto 居中。

【讨论】：

除非元素有定义的宽度，否则它根本不起作用。

【参考方案3】：

Bootstrap 4 没有 center-block 相反，我使用 d-block mx-auto 将显示设置为阻止，并将左右边距设置为自动。

【讨论】：

现在是d-block mx-auto

@Kyobul，你确定吗？它对我有用。可以举个例子吗？