如何在页面上居中温泉 ui 按钮栏

Question

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

text-align:center

但预期的结果并没有到来

卡住here.some帮助会很大appreciated.Here是代码。

                <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

这里是一个如何让 div

居中的例子

http://jsfiddle.net/9n0czw7s/

你应该把左右边距设置为auto

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

Answer 2

将 display:inline 块添加到 "button-bar__item" 并在此处编辑此行：

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

应该可以了。

Answer 3

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

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

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

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

如何在页面上居中温泉 ui 按钮栏

How to center onsen ui button bar on a page

html

css

onsen-ui