Как сделать кнопку по центру html
Для того чтобы центрировать кнопку на странице, можно использовать следующий метод:
- Создадим кнопку
<body>
<button></button>
</body>
- В CSS установим свойство для кнопки
display: flexбез него следующее свойство не будет работать - этоmargin: 0 auto;Он и осуществляет центрирование кнопки. Код выглядит так:
button {
display: flex;
margin: 0 auto;
}
Для того чтобы центрировать кнопку на странице, можно использовать следующий код:
<div style="text-align:center">
<button>Кнопка</button>
</div>
В данном примере кнопка будет находиться внутри блока <div>, у которого задано свойство text-align:center. Это свойство позволяет выравнивать содержимое блока по центру.
Если нужно выровнять не только горизонтально, но и вертикально, то можно использовать следующий код:
<div
style="display:flex; justify-content:center; align-items:center; height:100vh;"
>
<button>Кнопка</button>
</div>
В данном примере мы использовали свойство display:flex, чтобы создать гибкий контейнер, в котором содержимое будет выравниваться по центру. Свойство justify-content:center выравнивает содержимое по горизонтали, а align-items:center по вертикали. Свойство height:100vh задает высоту блока равную высоте видимой области окна браузера.