Html 如何在页面上的用户界面按钮栏上居中显示

我正在尝试将按钮栏放在页面中央。 我正在尝试

文本对齐：居中

但预期的结果并没有出现

卡在这里。非常感谢您的帮助。这是代码

                <div class="button-bar" style="width:300px;" style="text-align:center">
                    <div class="button-bar__item" style="text-align:center">
                        <button class="button-bar__button">Prev</button>
                    </div>

                    <div class="button-bar__item" style="text-align:center">
                        <button class="button-bar__button">Hint</button>
                    </div>

                    <div class="button-bar__item" style="text-align:center">
                        <button class="button-bar__button">Next</button>
                    </div>
                </div>

上
暗示
下一个

下面是一个示例，说明如何将div居中

您应该将左右边距设置为“自动”

---

将显示：内联块添加到“按钮栏项目”并在此处编辑此行：

<div class="button-bar" style="width:300px;" style="text-align:center">

应该这样做

只能使用

text align:center

使内联（-block）元素居中。但是，默认情况下，div是块元素，因此它们不受文本对齐规则的约束。您可以使用

display:inline块覆盖CSS中的默认值像这样：

.button-bar {
    text-align: center;
}

.button-bar > div {
    display: inline-block;
}

必须更正只能声明一次的
style
属性：
style=“width:300px；text align:center；”
并将
display:inline块添加到子元素中。
<div class="button-bar" style="text-align:center">

.button-bar{
 margin-left: auto;
 margin-right:auto
 }

.button-bar {
    text-align: center;
}

.button-bar > div {
    display: inline-block;
}