Q:

How to center onsen ui button bar on a page

I am trying to place the button bar in the center of the page.
I am trying with 

text-align:center

But the expected result is not coming.
Stuck here.some help will be much appreciated.Here is the code.
                <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>

A:

http://jsfiddle.net/BramVanroy/9n0czw7s/1/
You can only center inline(-block) elements with text-align: center. However, divs are by default block elements so they are not subject to the text-align rule. You can override the default in CSS by using display: inline-block; like so:
.button-bar {
    text-align: center;
}

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

