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/

您只能使用text-align: center将内联（-block）元素居中。但是，div默认是块元素，因此它们不受text-align规则的约束。您可以使用display: inline-block;覆盖CSS中的默认值，如下所示：

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

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

Answer 2

以下是如何使div居中的示例

http://jsfiddle.net/9n0czw7s/

你应该将左右边距放到 auto

.button-bar {
    position:relative;
    margin:auto;
}

Answer 3

将display：inline-block添加到＆＃34; button-bar__item＆＃34;并在此处编辑此行：

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

到这里：

<div class="button-bar" style="text-align:center">

最后添加

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

应该这样做。

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

3 个答案: