Botão Alinhar na parte inferior da div usando CSS

105

Quero alinhar meu botão no canto inferior direito do meu div. Como eu posso fazer isso?

insira a descrição da imagem aqui

Css atual de div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;
Harry Joy
fonte

Respostas:

224

Você pode usar position:absolute;para posicionar absolutamente um elemento dentro de um div pai. Ao usar, position:absolute;o elemento será posicionado absolutamente a partir do div pai primeiro posicionado; se não conseguir encontrar um, ele será posicionado absolutamente a partir da janela, portanto, você precisará ter certeza de que o div de conteúdo está posicionado.

Para posicionar o div de conteúdo, todos os positionvalores que não são estáticos funcionarão, mas relativeé o mais fácil, pois não altera o posicionamento dos divs por si só.

Portanto, adicione position:relative;ao div de conteúdo, remova o float do botão e adicione o seguinte css ao botão:

position: absolute;
right:    0;
bottom:   0;
Kokos
fonte
1
@Harry Joy: Você também aplicou position: relativeao elemento que contém o botão + do formulário?
trinta dias
1
@Harry Joy: Então deve ser relativo a isso div, não à página. Se o rodapé também estiver contido nisso div, talvez eles simplesmente pareçam ser a mesma coisa. Se você sabe a altura do seu rodapé, no botão você pode usar bottom: HEIGHT_OF_FOOTERpx.
trinta dias
1
@Harry Joy: Então há muita confusão aqui. Você deve postar seu HTML / CSS como um caso de teste jsFiddle .
trinta dias
1
@thirtydot: Está funcionando. Thnx. perdeu a posição: relativo. Adicionado no div errado.
Harry Joy
3
Na verdade, só tenho que fazer um comentário e ressaltar o quanto estou feliz por ter encontrado essa solução. Isso tem me incomodado há anos!
K. Kilian Lindberg
31

CSS3 flexbox também pode ser usado para alinhar o botão na parte inferior do elemento pai.

HTML necessário:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS necessário:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Captura de tela:

Imagem de saída

Recursos úteis:

Mohammad Usman
fonte
12

O contêiner pai deve ter isto:

position: relative;

O botão em si deve ter isto:

position: relative;
bottom: 20px;
right: 20px;

ou o que você quiser

Aron
fonte
6
Observe que esta pergunta foi feita há quase 3 anos e obteve uma resposta.
Itay Gal
Observe que essa resposta está incorreta. Com position:relativeo botão, ele será movido de sua posição original em vez de com base no pai.
Kokos de
1
Você precisa usar position: absolutepara isso a partir do canto inferior direito.
CaptainBli
-26

Vai para a direita e pode ser usado da mesma forma para a esquerda

.yourComponent
{
   float: right;
   bottom: 0;
}
BehranG BinA
fonte
3
Isso apenas alinha seu botão à direita. Não o canto inferior direito.
Ruben