Как прижать текст к низу блока css

Как прижать элемент к низу или верху родительского элемента

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.

Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:

 #parent < background:black; height:300px; >#child 
Текст дочернего элемента
 

Для красоты и наглядности я сделал дочерний элемент квадратным:

Способ №1. Абсолютное позиционирование

Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

  
Текст дочернего элемента
 

Это значит что в таком случае:

 #parent < background:black; height:300px; >#child,#child2,#child3< display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; > #child < background:red; >#child2 < background:yellow; >#child3 
Текст дочернего элемента 1
 
Текст дочернего элемента 2
 
Текст дочернего элемента 3
 

После проделанного выше способа получиться следующее:

Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.

Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

  
Текст дочернего элемента 1
 
Текст дочернего элемента 2
 
Текст дочернего элемента 3
 

Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Способ №2. Вертикальное выравнивание

Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

 #parent < background:black; >#child,#child2,#child3 < display:inline-block; >#child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 
Текст дочернего элемента 1
 
Текст дочернего элемента 2
 
Текст дочернего элемента 3
 

Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

 #parent < background:black; >#child,#child2,#child3< vertical-align:bottom; /* вот она */ display:inline-block; > #child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 
Текст дочернего элемента 1
 
Текст дочернего элемента 2
 
Текст дочернего элемента 3
 

1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

Как прижать элементы к верху родительского

Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

 #parent < background:black; >#child,#child2,#child3 < width:100px; display:inline-block; >#child < background:red; >#child2 < background:yellow; >#child3 
Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
 
Мало текста, мало текста. Текст дочернего элемента 2
 
Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3
 

Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

 #parent < background:black; >#child,#child2,#child3< vertical-align:top; /* top */ width:100px; display:inline-block; > #child < background:red; >#child2 < background:yellow; >#child3 
Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
 
Мало текста, мало текста. Текст дочернего элемента 2
 
Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3
 

Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!

Текст к низу блока

как прилепить текст к низу блока
варианты с position:absolute не вариант, высоту фиксирован блоку я поставить не могу, т.к адаптивная верстка поэтому вариант с line-height или задание определ отступа тоже отпадает
Кто какие еще варианты знает?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Привязать картинки к низу блока
Привет, форумчане. Появилась следующая проблема: нужно привязать картинки к низу блока. Пользуюсь.

Фон блока не прижимать к самому низу
Здравствуйте. Показалось, что все просто, но оказалось нет. В общем, между двух появляющийся.

Прилипание блока к низу экрана, когда его не видно
Всем привет. Подскажите как решить такую задачу: Есть блок <div >

152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
у блока сделать display:table-cell; vertical-align:bottom;
Регистрация: 07.04.2014
Сообщений: 174

способ хороший но не подходит, блоки становятся шириной контента и все валиться! Но все равно спасибо! )

152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
ну в порядке бреда можно еще так попробовать:
Блок обертка, внутри блок с текстом

1 2 3 4

Блок обертка{ display: flex; box-align:end; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как прижать блок к низу блока, без абсолют и flex?
Как прижать блок к низу блока, без абсолют и flex?

Прижать текст в tr к низу
Здравствуйте, дано: <table> <tr style="height: 45px;"> <td>fishtext</td> .

Футер прижатый к низу, наезжает на текст
Здравствуйте, делаю сайт на котором не все страницы длинные, есть небольшие и футер висел в.

Текст по ширине блока
Здравствуйте! Есть Блок с картинкой, размер которой заранее не известен. Под картинкой лежит.

Или воспользуйтесь поиском по форуму:

Как прижать элемент к низу блока css

Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:

  class="wrapper">  class="content">i am a wrapper  class="inside">i am inside    

Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:

.wrapper  /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content  background-color: #38d9a9; height: 200px; position: relative; > .inside  /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к нижней границе относительно блока с position: relative*/ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 100%; height: 75px; background-color: #444; > 

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.