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

Выравнивание кнопки в центре

У меня есть простая кнопка отправки. Я хочу привести его в центр. Вот мой код:

<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">

Однако это не сработает. Каков наилучший/простой способ сделать это?

4b9b3361

Ответ 1

Вы должны использовать что-то вроде этого:

<div style="text-align:center">  
    <input type="submit" />  
</div>  

Или вы можете использовать что-то вроде этого. Предоставляя элементу ширину и определяя auto для левого и правого полей, элемент будет центрировать себя в своем родителе.

<input type="submit" style="width: 300px; margin: 0 auto;" />

Ответ 2

Вот что сработало для меня:

    <input type="submit" style="margin-left: 50%">

Если вы добавите только маржу, без левой части, она будет центрировать кнопку отправки в середине всей страницы, что затрудняет поиск и предоставление вашей формы незавершенной для людей, у которых нет терпения, чтобы найти отправить кнопку lol. margin-left центрирует его в пределах одной линии, поэтому он не будет дальше вниз по вашей странице, чем вы планировали. Вы также можете использовать пиксели вместо процента, если хотите просто отложить кнопку отправки немного, а не на полпути через страницу.

Ответ 3

margin: 50%; 

Вы можете отрегулировать процент по мере необходимости. Кажется, это работает для меня в ответных письмах.

Ответ 4

Добавить ширина: 100px, margin: 50%. Теперь левая часть кнопки установлена ​​в центр.
Наконец, добавьте половину ширины кнопки в нашем случае 50px.
Середина кнопки находится в центре.

<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>

Ответ 5

Для меня это сработало с использованием flexbox, что, на мой взгляд, является самым чистым решением.

Добавьте класс css вокруг родительского div/элемента с помощью:

.parent {
display: flex;
}

и для использования кнопки:

.button {
justify-content: center;
}

Вы должны использовать родительский div, иначе кнопка не "знает", какова средняя часть страницы/элемента.

Если это не работает, попробуйте:

#wrapper {
    display:flex;
    justify-content: center;
}