O html “”É um elemento ativado pelo usuário que executa qualquer ação no clique. É um componente essencial de formulários baseados na Web que geralmente são usados ​​para enviar o formulário. Além disso, também é utilizado para mudar para outra página, incorporar imagens clicáveis ​​e executar outras operações necessárias. Os usuários também podem aplicar propriedades do CSS para estilizar o botão, como o alinhamento de botões em todas as direções, efeito de pairar, borda, etc.

Este tutorial examinará:

• Como fazer/criar um botão em um "div"?
• Como centralizar um botão dentro de um "div"?
• Como estilizar um botão dentro de um "div"?

Como fazer/criar um botão em um "div"?

Para fazer um botão em um “div”Elemento, experimente as instruções fornecidas.

Etapa 1: Crie um contêiner div

Inicialmente, utilize o “”Tag para criar uma“div”eu ia”Atributo“Principal-Div”.

Etapa 2: Insira um título

Em seguida, insira um título com a ajuda do “

" marcação. Incorpor.

Etapa 3: adicione outro contêiner "div"

Adicionar outro "div“Container junto com a classe“btn-center”.

Etapa 4: Crie o botão

Para criar um botão, utilize o “”Tag e especifique o“tipoAtributo como “enviar”. Então, incorpore algum texto entre “”Tags que serão exibidas no botão:

Clique no botão Enviar

Enviar

Pode -se notar que o botão foi criado no contêiner:

Como centralizar um botão dentro de uma div?

Para alinhar um botão no centro dentro de um “div”Elemento, listamos alguns métodos:

• Método 1: centralize um botão dentro de um "div" usando a propriedade "Display"
• Método 2: centralize um botão dentro de uma “div” usando a propriedade “Posição”
• Método 3: centralize um botão dentro de uma “div” usando a propriedade “Transform”

Método 1: centralize um botão dentro de um div usando a propriedade "Display"

Os usuários podem utilizar o CSS “mostrar”Propriedade para centralizar o botão em um“div”. Para fazer isso, experimente as instruções declaradas.

Etapa 1: Elemento de estilo “div”

Para estilizar o “div”Elemento, primeiro, acessá -lo com a ajuda do ID atribuído“#Main-Div", onde "#”É um seletor de identificação CSS. Em seguida, aplique as seguintes propriedades CSS:

#main-div
borda: 3px RGB sólido (7, 39, 223);
Margem: 20px 50px;
Background-Color: Aquamarine;
Botting-Bottom: 20px;

Aqui:

• ““fronteira”A propriedade é utilizada para especificar o limite em torno de um elemento.
• ““margem”Aloca o espaço fora do limite definido.
• ““cor de fundo”É usado para definir a cor de fundo do elemento.
• ““Botting-Bottom”Define um espaço dentro do botão elemento.

Saída

Etapa 2: centralize o botão no recipiente "div"

Agora, acesse o botão utilizando o atributo de classe “.btn-center”. Em seguida, aplique as propriedades abaixo codificadas:

.btn-center
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;

No trecho de código acima:

• ““mostrar”Propriedade especifica o comportamento da exibição de um elemento. Por exemplo, o valor desta propriedade é definido como “flex”.
• ““justificar-center”É usado para alinhar os itens do contêiner de maneira flexível na horizontal ao eixo principal.
• ““alinhado-itens”A propriedade é utilizada para especificar o alinhamento padrão dentro do recipiente de grade ou flexão para itens.

Saída

Método 2: centralize um botão dentro de um div usando a propriedade "Posição"

Para centralizar um botão usando o “posição”Propriedade, primeiro, acesse o“div”Contêiner usando o ID“#Main-Div”E aplique as propriedades CSS abaixo mencionadas:

#main-div
Altura: 150px;
Posição: relativa;
Margem: 20px 70px;
borda: 3px duplo RGB (3, 39, 243);
Alinhamento de texto: centro;

Aqui:

• ““altura”Propriedade especifica a altura do elemento definido.
• ““posição”É utilizado para alocar a posição do método para o tipo de um elemento.
• ““alinhamento de texto”É usado para definir o alinhamento do texto.

Saída

Método 3: centralize um botão dentro de uma “div” usando a propriedade “Transform”

Colocar uma fronteira em um centro dentro de um “div", Utilize o"transformarPropriedade CSS. Para fazer isso, experimente as instruções fornecidas.

Etapa 1: cabeçalho de estilo

Primeiro, acesse o cabeçalho usando o nome da tag "H1”:

H1
Alinhamento de texto: centro;

Então, aplique o “alinhamento de texto”Propriedade para definir o alinhamento do texto no centro.

Etapa 2: centralize um botão dentro do contêiner "div"

Em seguida, acesse o segundo “div”Elemento que contém o botão com a ajuda da classe atribuída“.btn-center”E aplica as propriedades fornecidas:

.btn-center
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
Transformar: traduzir (-50%, -50%);

Aqui:

• O "posição”A propriedade é definida como“absoluto”Para posicionar o elemento em relação ao ancestral mais próximo.
• ““principal" e "esquerda”As propriedades são utilizadas para definir a posição do elemento a partir dos lados superior e esquerdo.
• A propriedade "Transform" é usada para transformar o elemento usando o "traduzir()”Método. Este método move um elemento de sua posição atual de acordo com os parâmetros fornecidos junto com o “X ”e“ y”Eixo:

Como estilizar o botão dentro de um "div"?

Para estilizar o botão dentro de um “div”Elemento, primeiro, acesse o botão com o nome da tag“botão”E aplique as propriedades CSS declaradas:

botão
Altura: 50px;
Largura: 80px;
Radio de fronteira: 50px;
Cor: RGB (58, 15, 250);
Negrito;
Background-Color: RGB (235, 193, 9);

A descrição das propriedades aplicadas é a seguinte:

• O "altura" e "largura”Propriedades definem o tamanho do elemento.
• ““Radio de fronteira”Propriedade cria os cantos arredondados do limite do elemento.
• ““cor”É utilizado para especificar a cor do texto do elemento.
• ““Fonte”Define a espessura do texto.

Pode -se observar que o botão é de acordo com os requisitos:

É tudo sobre como centralizar o botão dentro de um contêiner div.

Conclusão

Para centralizar um botão dentro de um “div", Primeiro, crie um"”Elemento e atribui um“aula" ou "eu ia”Atributo. Depois disso, faça um botão utilizando o “" marcação. Então, para centralizar um botão dentro de um “div”Elemento, primeiro acesse o contêiner e aplique a propriedade CSS“mostrar","transformar", ou "posição”Para colocar um botão no centro. Este tutorial explicou métodos diferentes para centralizar o botão dentro de um “div" elemento.