"Позиционирование текста в нижнем углу div с CSS"

Быстрый ответ

Для того, чтобы фиксировать текст у нижнего края div, назначьте родительскому div свойство position: relative. Далее, текстовому элементу внутри него присвойте position: absolute и bottom: 0.

<div style="position: relative; height: 100px;">
  <span style="position: absolute; bottom: 0;">Пора спать, малыши!</span>
</div>

Такие CSS-правила обеспечивают "смещение" текста к нижнему краю, независимо от размеров его "родителя" — div.

Применение Flexbox

Flexbox — отличный инструмент для управления пространством между элементами. Чтобы текст оказался внизу, используйте display: flex и свойства с ним связанные.

.parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Этот параметр "отправляет" текст прямо вниз! */
}
.parent > .child {
    align-self: flex-start; /* Если текст должен быть вверху. */
}

Для правильного выравнивания примените align-self: flex-end.

.parent > .child {
    align-self: flex-end; /* Текст сместится в нижний правый угол */
}

Не забывайте проверять поддержку Flexbox в браузерах.

Вертикальное выравнивание с помощью свойства Table-cell

В сочетании свойств display: table-cell и vertical-align: bottom, можно обеспечить надежное выравнивание текста по нижнему краю для однострочного контента.

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

Высоту строки адаптируйте под одну строку текста.

.child {
    line-height: 80px; /* Чуть-чуть воздуха для строк */
}

Визуализация

Представьте div как стакан, а текст как вишенку на его дне:

🥛🍒 <- Именно здесь текст будет находиться!

Для того чтобы достигнуть этого эффекта используйте CSS:

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

После ваших манипуляций с CSS текст оказывается у самого дна:

🥛
🍒 <- Тут его и следует искать!

Точное управление с помощью отступов

Обеспечьте больше пространства родительскому div, используя внутренние отступы для создания визуального пространства.

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

.child {
    position: absolute;
    bottom: 0; /* Текст будет прижат к нижнему краю */
    right: 0;
}

Такой подход схож с созданием игровой зоны внутри div для текста.

Масштабирование при работе с несколькими контейнерами

При работе с несколькими div, используйте гибкий подход, который адаптируется под разные размеры экрана и выравнивает текст одинаковым образом везде. Добавьте универсальный класс к каждому div.

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

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

Выравните текст справа:

.child {
    text-align: right;
}

Практическая демонстрация

Живой пример на JSFiddle или CodePen наглядно показывает, как текст подчиняется заданным правилам.

Возможные проблемы и альтернативы

Вот некоторые способы и возможные трудности, которые могут возникнуть при позиционировании текста у нижнего края контейнера:

Вертикальное выравнивание с использованием CSS Grid

CSS Grid также может выравнивать элементы вертикально, как и Flexbox.

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

Подробнее об этом расскажет наш спикер на видео

Контролирование переполнения

Если текст выходит за рамки, используйте overflow: auto; или overflow: hidden; для регулирования его поведения.

Использование адаптивного дизайна

Для поддержания адаптивности дизайна используйте относительные единицы (em, vh, vw, %) вместо px.

Полезные материалы

1. Полное руководство по Flexbox на CSS-Tricks — анализ работы Flexbox.
2. Описание свойства position на MDN — всё об свойстве position.
3. Полное руководство по CSS Grid на CSS-Tricks — полное описание CSS Grid.
4. CSS Layout – Свойство position на w3schools — основы CSS position.
5. vertical-align на CSS-Tricks — принципы работы vertical-align.
6. Описание свойства CSS bottom на w3schools — подробности использования свойства bottom.
7. Абсолютное горизонтальное и вертикальное центрирование в CSS на Smashing Magazine об абсолютном центрировании.