Como centralizar um botão usando o CSS Flexbox

No HTML, os botões são elementos clicáveis ​​usados ​​para executar uma ação específica. Usando CSS, você pode definir a posição do botão onde deseja colocá -lo. Para isso, existem várias técnicas no CSS, uma delas é Flexbox. ““flex”É usado para definir a posição do elemento de acordo com sua viewport.

Este artigo ensinará a centralizar um botão usando o CSS Flexbox.

Então, vamos começar!

Como centralizar o botão usando o CSS Flexbox?

““flex”É o valor definido para a propriedade de exibição do CSS. Dependendo do tamanho da viewport, ele define conteúdo ou elementos de acordo. No CSS, o valor flexível cria espaço igual entre os elementos para garantir que eles sejam organizados com eficiência.

Sintaxe

Na sintaxe acima mencionada, “flex”Será especificado como o valor do“mostrar" propriedade.

Então, vamos verificar o exemplo para centralizar o botão usando flex.

Exemplo

No HTML, criaremos um contêiner com classe chamada “botão”E dentro dele, crie um botão usando tag:

No arquivo CSS, “.botão”É usado para acessar a classe que atribuímos ao . Para definir a posição do botão adicionado no centro da div, atribuiremos o valor da propriedade Display, Justify-Content e Align-Items como “flex","Centro", e "Centro”, Respectivamente. Além disso, definiremos a altura da div criada para “200px”E atribua o valor da fronteira como“5px","sólido" e "preto”:

No código acima, “Justify-Content”É usado para definir o botão no centro da div horizontal e“Align-iteem”É usado para definir o botão no centro da div verticalmente.

Depois de implementar o código acima, vá para o arquivo HTML e execute -o para ver o seguinte resultado:

Você pode ver que o botão é exibido com sucesso no centro da div.

Conclusão

Para centralizar o botão, você pode usar o “mostrar","Align-iteem", e "Justify-Content”Propriedades do CSS. Essas propriedades permitem que você defina o botão no centro da div ou qualquer elemento ao especificar o valor da propriedade de exibição como “flex”, Align-iten, e justifique o conteúdo como“Centro”. Neste artigo, explicamos como centralizar o botão usando o Flexbox com a ajuda de um exemplo apropriado.