如何在页面上设置onsen ui按钮栏

Question

我试图将按钮栏放在页面的中心.我正在努力

文本对齐:中心

但预期的结果还没有到来.

坚持到这里.一些帮助将非常感激.这是代码.

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

Answer 1

http://jsfiddle.net/BramVanroy/9n0czw7s/1/

您只能将内联(-block)元素居中text-align: center.但是,div默认是块元素,因此它们不受text-align规则的约束.您可以使用display: inline-block;如下方式覆盖CSS中的默认值:

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

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