Align button to the center

Question

I need to center-align a button in a login form and I can't manage to do it. The reason for that is that there is a css property inherited from div .page (text-align: left). I tried to assign the property text-align:center to the element itsef, but there is no effect, and the .page property seems to prevail over it. I saw that the < div class="page" comes from 1column.phtml, so it affects all my page.

Anyone knows how could I center-align the button?

Answer 1

Here's your solution: http://jsfiddle.net/7Laf8/

Basically, place your button into a div with centred text:

<div class="wrapper">
    <button class="button">Button</button>
</div>

With the following styles:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}