01.04.2025

"Posicionando Texto no Canto Inferior de um Div com CSS"

Resposta Rápida

Para ancorar o texto na borda inferior de um div, defina a propriedade do div pai como position: relative. Em seguida, atribua ao elemento de texto dentro dele position: absolute e bottom: 0.

<div style="position: relative; height: 100px;">
  <span style="position: absolute; bottom: 0;">Hora de dormir, pequenos!</span>
</div>

Essas regras de CSS garantem que o texto seja "movido" para a borda inferior, independentemente do tamanho do seu div "pai".

Usando Flexbox

Flexbox é uma ótima ferramenta para gerenciar o espaço entre elementos. Para posicionar o texto na parte inferior, utilize display: flex junto com propriedades relacionadas.

.parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Essa propriedade "envia" o texto para baixo! */
}
.parent > .child {
    align-self: flex-start; /* Se o texto deve ficar no topo. */
}

Para um alinhamento adequado, use align-self: flex-end.

.parent > .child {
    align-self: flex-end; /* O texto se moverá para o canto inferior direito */
}

Não se esqueça de verificar o suporte ao Flexbox nos navegadores.

Alinhamento Vertical com a Propriedade Table-cell

Ao combinar as propriedades display: table-cell e vertical-align: bottom, você pode garantir um alinhamento confiável do texto na borda inferior para conteúdos de uma linha.

.parent {
    display: table-cell;
    vertical-align: bottom;
    height: 100px;
}
.parent > .child {
    display: block;
}

Ajuste a altura da linha para caber uma única linha de texto.

.child {
    line-height: 80px; /* Um pouco de espaço para as linhas */
}

Visualização

Imagine o div como um copo e o texto como uma cereja no fundo:

🥛🍒 <- É aqui que o texto estará!

Para obter esse efeito, utilize CSS:

div {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: 100px;
}
div > p {
    margin: 0;
}

Após suas alterações de CSS, o texto vai acabar bem no fundo:

🥛
🍒 <- É aqui que você o encontrará!

Controle Preciso com Padding

Forneça mais espaço para o div pai usando padding para criar espaço visual.

.parent {
    padding: 20px;
    position: relative;
}

.child {
    position: absolute;
    bottom: 0; /* O texto será pressionado contra a borda inferior */
    right: 0;
}

Essa abordagem é semelhante a criar uma área de recreação dentro do div para o texto.

Escalando ao Trabalhar com Múltiplos Contêineres

Ao trabalhar com múltiplos divs, utilize uma abordagem flexível que se adapte a várias dimensões de tela e alinhe o texto de maneira uniforme em todos os lugares. Adicione uma classe universal a cada div.

.parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.parent > .child {
    align-self: flex-end;
}

Alinhe o texto à direita:

.child {
    text-align: right;
}

Demonstração Prática

Um exemplo ao vivo no JSFiddle ou CodePen mostra claramente como o texto adere às regras especificadas.

Possíveis Problemas e Alternativas

Aqui estão alguns métodos e desafios potenciais que podem surgir ao posicionar texto na borda inferior de um contêiner:

Alinhamento Vertical Usando CSS Grid

CSS Grid também pode alinhar verticalmente os elementos, assim como o Flexbox.

.parent {
    display: grid;
    align-items: end;
}

Controlando Overflow

Se o texto transbordar, utilize overflow: auto; ou overflow: hidden; para regular seu comportamento.

Usando Design Responsivo

Para manter um design responsivo, utilize unidades relativas (em, vh, vw, %) em vez de px.

Recursos Úteis

1. Guia Completo de Flexbox no CSS-Tricks — Análise de como o Flexbox funciona.
2. A Propriedade Position no MDN — Tudo sobre a propriedade position.
3. Guia Completo de CSS Grid no CSS-Tricks — Uma descrição abrangente do CSS Grid.
4. Layout CSS - A Propriedade Position no w3schools — Noções básicas de posicionamento CSS.
5. Vertical Align no CSS-Tricks — Princípios de vertical-align.
6. A Propriedade CSS Bottom no w3schools — Detalhes sobre o uso da propriedade bottom.
7. Centralização Horizontal e Vertical Absoluta em CSS no Smashing Magazine — Sobre centralização absoluta.

Video

Navigation