How to horizontally center the buttons in a fixed sized div?

css, html

Solution

Adding `text-align:center;` CSS to the `<div>` will center the buttons. You should also consider separating the style from the content, which amongst other reasons, reduces the duplication. For example

CSS

div {
    position:relative;
    width:300px;
    height:30px;
    border:1px solid;
    text-align:center;
}

input {
    position:relative;
    width:70px;
    height:30px;
}

HTML

<div>
    <input type="button" value="ok"/>
    <input type="button" value="ok"/>
</div>

Edit: The official definition for `text-align` states:

The text-align property describes how inline-level content of a block container is aligned

so it will centre all inline level elements and `<input>` is an inline element.

Problem

Below is the code, two buttons in one div. ``` <div style="position:relative; width: 300px; height: 30px; border: 1px solid;"> <input type="button" value="ok" style="position:relative; width: 70px; height: 30px;"> <input type="button" value="ok" style="position:relative; width: 70px; height: 30px;"> </div> ``` How to horizontally center the buttons in fixed sized did ?

Original source