Прижать текст к низу css

"Текст снизу css", как "прижать текст к низу css" или же прижать текст к низу. Данную тему поместим в text_align.

Пошагово - располагаем текст снизу.

1. Текст в блоке по умолчанию
2. Прижимаем текст снизу - table
3. Прижимаем текст снизу - position
4. Прижимаем текст снизу - flex
5. Прижимаем текст снизу - flex-2

Текст в блоке по умолчанию

Рассмотрим блок с текстом, который не располагается внизу... все стили по умолчанию. Чтобы вы могли его увидеть добавил border:

Код расположения текста по умолчанию.

<div style ="border: 1px solid; width: 100%; height: 60px;">Здесь текст по умолчанию, который не прижат с помощью css никак...</div>

Результат :
Здесь текст по умолчанию, который не прижат с помощью css никак...
Вывод :

Как видим, что текст по умолчанию, если на него не влияют никакие правила, то располагается слева в верхними углу...




Прижимаем текст снизу - table

Выше вы видели текст, который располагается по умолчанию - теперь давайте его прижмем к низу!

Для того, чтобы прижать текст к низу вам понадобится:

Используем два div с классами : "table" и "example".

Классу "table" присваиваем display = table(т.е. это будет таблица)

А классу "example" - "display: table-cell" - это будет ячейка таблицы.

Ну и далее позиционирование... снизу...

vertical-align: bottom;

Соберем весь код:

Код текста снизу.

Html:

<div class=table>

<div class=example>Текст снизу при помощи "table"</div>

</div>

Css :

<style>

.table {

display: table;

border: 1px solid;

width: 100%;

height: 60px;

}

.example {

display: table-cell;

vertical-align: bottom;

width: 101%;

}

</style>

Пример кода текста снизу.

Разместим выше приведенный код с текстом снизу прямо здесь:

Текст снизу при помощи "table"



Прижимаем текст снизу - position

Для того, чтобы прижать/расположить текст снизу - вам понадобится:

Для родительского блока устанавливаем "position" = relative.

Для внутреннего "position" = absolute.

+ bottom = 0 :

bottom: 0px;

Соберем весь код:

Код текста снизу - position.

Html:

<div class=relative>

<div class=absolute>Прижимаем текст снизу - position : relative + absolute</div>

</div>

Css:

<style>

.relative{

width: 100%;

height: 60px;

border: 1px solid #ab00ff;

position: relative;

}

.absolute {

position: absolute;

bottom: 0px;

}

</style>

Пример кода текста снизу(position).

Разместим выше приведенный код с текстом снизу при помощи свойств "position" прямо здесь:

Прижимаем текст снизу - position : relative + absolute



Прижимаем текст снизу - flex + column-reverse.

Для того, чтобы прижать текст к низу вам понадобится:

Используем два div, для первого "div" присвоим класс : "fle_x".

Классу "fle_x" присваиваем display = flex.

+ Направление :

flex-direction: column-reverse;

Соберем весь код:

Код текста снизу - flex + column-reverse.

Html:

<div class=fle_x>

<div>Прижимаем текст снизу - flex + flex-reverse</div>

</div>

Css:

<style>

.fle_x {

display: flex;

border: 1px solid;

height: 60px;

flex-direction: column-reverse;

}

</style>

Пример кода текста снизу(flex).

Разместим выше приведенный код с текстом снизу при помощи свойств "flex" здесь:

Прижимаем текст снизу - flex + flex-reverse



Прижимаем текст снизу - flex + flex-end

Для того, чтобы прижать текст к низу вам понадобится:

Используем два div, для первого "div" присвоим класс : "fle_x_2".

Классу "fle_x_2" присваиваем display = flex.

+ Направление :

flex-direction: column-end;

Соберем весь код:

Код текста снизу - flex + flex-end.

Html:

<div class=fle_x_2>

<div>Прижимаем текст снизу - flex + flex-end</div>

</div>

Css:

<style>

.fle_x_2{

width: 100%;

height: 60px;

display: flex;

align-items: flex-end;

border: 1px solid #ab00ff;

}

</style>

Пример кода текста снизу(flex).

Разместим выше приведенный код с текстом снизу при помощи свойств "flex" здесь:

Прижимаем текст снизу - flex + flex-end