У меня есть простая кнопка отправки. Я хочу привести его в центр. Вот мой код:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
Однако это не сработает. Каков наилучший/простой способ сделать это?
У меня есть простая кнопка отправки. Я хочу привести его в центр. Вот мой код:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
Однако это не сработает. Каков наилучший/простой способ сделать это?
Вы должны использовать что-то вроде этого:
<div style="text-align:center">
<input type="submit" />
</div>
Или вы можете использовать что-то вроде этого. Предоставляя элементу ширину и определяя auto
для левого и правого полей, элемент будет центрировать себя в своем родителе.
<input type="submit" style="width: 300px; margin: 0 auto;" />
Вот что сработало для меня:
<input type="submit" style="margin-left: 50%">
Если вы добавите только маржу, без левой части, она будет центрировать кнопку отправки в середине всей страницы, что затрудняет поиск и предоставление вашей формы незавершенной для людей, у которых нет терпения, чтобы найти отправить кнопку lol. margin-left центрирует его в пределах одной линии, поэтому он не будет дальше вниз по вашей странице, чем вы планировали. Вы также можете использовать пиксели вместо процента, если хотите просто отложить кнопку отправки немного, а не на полпути через страницу.
margin: 50%;
Вы можете отрегулировать процент по мере необходимости. Кажется, это работает для меня в ответных письмах.
Добавить ширина: 100px, margin: 50%.
Теперь левая часть кнопки установлена в центр.
Наконец, добавьте половину ширины кнопки в нашем случае 50px.
Середина кнопки находится в центре.
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>
Для меня это сработало с использованием flexbox, что, на мой взгляд, является самым чистым решением.
Добавьте класс css вокруг родительского div/элемента с помощью:
.parent {
display: flex;
}
и для использования кнопки:
.button {
justify-content: center;
}
Вы должны использовать родительский div, иначе кнопка не "знает", какова средняя часть страницы/элемента.
Если это не работает, попробуйте:
#wrapper {
display:flex;
justify-content: center;
}