Подтвердить что ты не робот

Как я могу сделать элемент кнопки горизонтально отображаемым в центрировании в элементе div?

<div>
    <button>Button</button>
</div>

Я не хочу добавлять CSS-коды к элементу div. Поэтому <div style="text-align: center;"> не то, что я хочу. Я только хочу добавить CSS-коды к элементу кнопки. Я не хочу добавлять коды JS. Можно использовать CSS3. Спасибо!

Ответ 1

button {
    margin:0 auto;
    display:block;
}

Пример jsFiddle

Ответ 2

Другие уже упомянули метод margin: 0 auto;, но если вы хотите получить объяснение, браузер разбивает доступное пространство в любом контейнере, в котором находится ваш элемент.

Также важно указать, что вам, вероятно, потребуется также дать вашему элементу ширину для правильной работы.

Итак, в целом:

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}

Ответ 3

Вам нужно display: block; margin: auto; на <button>. jsFiddle