Ми також можемо вирівняти вміст div за низом за допомогою властивості flex. Використовуйте display: flex до елемента та додайте align-items: flex-end, щоб вирівняти його до кінця.
Найкращим можливим рішенням для переміщення div униз є наступне. В основному те, що вам потрібно зробити, це встановити дисплей flex і flex-direction як стовпець для батьківського елемента та додати 'margin-top: auto' до його дочірнього елемента, який потрібно перемістити на дно контейнера Примітка: я використовував bootstrap і його класи.
Вирівняйте div до нижньої частини сторінки в 3 кроки
- Крок 1: установіть відносну позицію батьків. Якщо ви хочете вирівняти div за нижньою частиною батьківського div, батьківський елемент повинен мати позицію : relative . …
- Крок 2: встановлення абсолютної позиції div. …
- Крок 3: встановлення властивості bottom на 0; …
- Додатково: внизу праворуч.
позиція: абсолютна; знизу: 0; щоб розмістити кнопку внизу div. У розділі <style> документа HTML ви можете використати наведений вище код, щоб застосувати цей стиль до потрібної кнопки.
Щоб вирівняти текст за нижньою частиною поля в CSS, ви можете використовувати властивість вертикального вирівнювання. Однак ця властивість працює лише для елементів вбудованого рівня та клітинок таблиці.
Рішення, яке ви можете зробіть контейнер гнучким, а потім вирівняйте елементи донизу, встановивши для властивості align-items значення «flex-end». Ємність повинна мати висоту.