Question

I’ve got a rectangle div in which I want to center two buttons horizontally. However, one of the buttons will be hidden at times, so I want the button that remains to center itself in the middle.

How can this be done? The buttons have a known/fixed width.

Answer 1

add "text-align: center; margin: auto" to the style of the rectangle div and you should be good to go.

<div class="rectangle" style="text-align: center; margin: auto">
    <input type="button" value="Click Me!" />
    <input type="button" value="Click Me, Too!" style="display:none;" />
</div>

if both are shown they will both be centered, otherwise the lone button will be centered

---

Example: http://jsfiddle.net/hunter/VpgvS/