Como alinhar o botão na parte inferior da div usando CSS?
Para criar uma aparência clara e simétrica de elementos, os alinhamentos são usados em páginas ou sites da web. O CSS permite alinhar elementos HTML em diferentes posições, como centro, esquerda, direita e inferior. Neste manual, usamos dois métodos para alinhar o botão na parte inferior da div, isto é:
-
- Método 1: Alinhe o botão na parte inferior do div usando “mostrar" Propriedade
- Método 2: Alinhe o botão na parte inferior da div usando “posição" Propriedade
Então vamos começar!
Método 1: Alinhe o botão na parte inferior do div usando a propriedade "Display"
No CSS, para alinhar o botão na parte inferior da div, o valor do “mostrar”A propriedade é definida como“flex”. Depende do tamanho da viewport e define conteúdo ou elementos de acordo. O valor flexível também cria espaço igual entre os elementos para garantir que sejam organizados simetricamente.
Sintaxe
Exibição: flex
Na sintaxe acima mencionada, “flex”Será especificado como o valor do“mostrar" propriedade.
Então, vamos verificar o exemplo para alinhar o botão na parte inferior usando flex.
Exemplo 1: Alinhe o botão na parte inferior e no centro da div
No HTML, adicionaremos uma div e atribuiremos o nome da classe como “div”E adicione seu cabeçalho e um sub div. Vamos atribuir o nome da classe como “btn”Para substituir e adicionar um botão usando a tag.
Html
Alinhe o botão na parte inferior
Após a conclusão do código HTML, vá para o CSS.
Aqui, vamos usar “.div”Para acessar o contêiner principal que criamos no HTML. Então, definiremos a altura da div como “150px”E defina o valor da posição como“relativo”. Para estilizar a div, defina a fronteira da div como “2px","sólido", e "RGB (26, 53, 1)”E a cor de fundo da div como“RGB (162, 173, 121)”.
CSS
.div
Altura: 150px;
Posição: relativa;
borda: 2px RGB sólido (26, 53, 1);
cor de fundo: RGB (162, 173, 121);
Observação: É necessário definir a posição e a altura do div para definir o botão na parte inferior da div.
Então, use “.btn”Para acessar o Sub Div criado na seção HTML. Defina o valor da propriedade de exibição como “flex"E altura como"130px”. Depois disso, defina o valor do conteúdo justificado e alinhado como “Centro”Para definir o botão na parte inferior da div:
.btn
exibição: flex;
Altura: 130px;
Justify-Content: Center;
alinhado-itens: centro;
A saída do código descrito acima é dado abaixo. Aqui, você pode ver esse botão alinhado na parte inferior da div:
Exemplo 2: Alinhe o botão na parte inferior esquerda da div
Para alinhar o botão no lado inferior esquerdo da div, você só precisa alterar o valor da propriedade Justify-Content do centro para “esquerda”:
Justify-Content: Esquerda;
Saída
Exemplo 3: Alinhe o botão no canto inferior direito da div
Para alinhar o botão no lado inferior direito da div, você deve substituir o valor da propriedade Justify-Content do centro para “certo”:
Justify-Content: Certo;
Saída
Agora, vá para o próximo método para alinhar o botão na parte inferior da div.
Método 2: Alinhe o botão na parte inferior do div usando a propriedade "Position"
O "posição”A propriedade é usada para especificar um tipo diferente de posição usada para vários elementos HTML. A sintaxe da propriedade de posição é dada abaixo.
Sintaxe
Posição: estática | Absoluto | fixo | relativo
Na sintaxe mencionada acima, são mencionadas as quatro propriedades a seguir da propriedade de posição:
-
- estático: É usado para definir a posição de acordo com o fluxo de página normal. Este método de posicionamento é definido por padrão.
- relativo: É utilizado para definir a posição de um elemento em relação ao outro elemento.
- absoluto: É utilizado para ajustar a posição de um subelemento com base na posição de seu elemento principal.
- fixo: Especifica a posição do elemento de acordo com sua visualização.
Vamos continuar o exemplo para ajustar o botão na parte inferior da div.
Exemplo 1: Alinhe o botão no canto inferior direito da div
Continuaremos o exemplo anterior do código HTML e atribuiremos propriedades para dividir de acordo:
.div
Posição: relativa;
borda: 2px RGB sólido (12, 38, 46);
Background-Color: RGB (55, 104, 119);
Altura: 150px;
Depois disso, definiremos a propriedade de posição para definir a posição do botão “.btn”Classe que acessa o botão que criamos no HTML. Em seguida, defina o valor da propriedade de posição como “absoluto”E defina a margem inferior e direita como“5px" e "0px”:
.btn
Posição: Absoluto;
Inferior: 5px;
Direita: 0px;
Observação: Para a div, definimos o valor da propriedade de posição como “relativo"E sub div como"absoluto”. Para fazer isso, a div principal dá controle para ajustar a posição do subd div. Se você definiu o valor da propriedade de posição para o pai e o filho Div como parente, ele não coloca um botão na parte inferior da div.
Como você pode ver na saída a seguir, o botão é definido no canto inferior direito da div:
Exemplo 2: Alinhe o botão na parte inferior esquerda da div
Para definir o botão no lado esquerdo inferior da div, substituiremos o “certo”Propriedade com“esquerda”E defina seu valor da seguinte forma:
Esquerda: 0px;
Saída
É isso! Explicamos o método de alinhar o botão na parte inferior do div usando CSS.
Observação: Também podemos definir o botão no centro, dando os valores para o “esquerda”Propriedade manualmente, mas não recomendamos porque pode afetar a capacidade de resposta da página.
Conclusão
O "mostrar" e "posição”A propriedade do CSS é utilizada para ajustar o botão na parte inferior da div. Usando a propriedade de posição, defina o valor da posição como o elemento pai como “relativo”E elemento filho como“absoluto”, E para a propriedade Display, defina -o como“flex”. Neste artigo, explicamos o método para alinhar o botão na parte inferior da div e fornecemos exemplos diferentes dele.