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

Как прижать элемент к низу блока 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; >

Курсы javascript

Подскажите пожалуйста как прижать текст ссылки (ссылка как блок display: inline-block) к низу.

Ну или на какое слово искать

28.10.2010, 19:52
Регистрация: 16.11.2009
Сообщений: 1,322
К низу чего?
29.10.2010, 01:46
Регистрация: 11.09.2010
Сообщений: 8,804

Вероятно к низу самой ссылки-блока (раз она блочная)
sanhai, поиграйся с line-height’ом. Для лучшего контроля можно текст обернуть в span, тогда можно уже полноценно позиционировать.

Как прижать текст к низу div’a ? — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

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

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

Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, 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 (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.

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

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

CSS свойство left

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

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №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

vertical-align

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

top

Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство 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

результат

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