Выравнивание css по низу: Как прижать элемент к низу или верху родительского элемента — Site on!

html — CSS прижать блок к низу родителя

Вопрос задан 7 лет 4 месяца назад

Изменён 7 лет 4 месяца назад

Просмотрен 4k раз

есть конструкция:

<div>
   <div>
      <div>
       вывод информации
      </div>
      <ul>
       часть навигации
      </ul>
   </div>
   <div>
      <div>
      еще информация
      </div>
      <ul>
      еще часть навигации
      </ul>
   </div>
</div>

навигация — горизонтальный список, уже приведен в нормальный вид.

как сделать так, чтоб блоки main_info и sub_info были одинаковыми по высоте(выравнивались по макс высоте), и элементы навигации были прибиты к низу родительских блоков?(были в одну линию)

предвижу вопросы «зачем такое размещение?» по условиям заказчика, в sub_info в зависимости от прав пользователя будут разные свистоперделки, от такой конструкции до картинки/формы/тупого текста.

..

• html
• css

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

#main_info, #sub_info {
  position: relative;
}
#main_info ul, #sub_info ul {
  position: absolute;
  left: 0;
  bottom: 0;
}

вот только списки при этом выпадут из потока, Вам придется под них создавать отступы внутри родителей (padding-bottom = высота ul).

На счет равенства по высоте в голову приходит только эмуляция таблицы: display table-row и table-cell (должно прокатить, см. в спецификации CSS).

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Вертикальное выравнивание строчных элементов.

| CSS-Tricks по-русски

В CSS есть такое свойство, называется vertical align

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

img {
	vertical-align	: middle;
}

Обратите внимание, что в этом случае использования, свойство применяется к элементу img. Поскольку изображения являются строчными элементами, то располагаются они в строке, как если бы они были простым текстом. Но что именно значит «располагаются в строке»? Вот именно здесь появляется понятие «вертикальное выравнивание».

Атрибут может принимать следующие значения: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, или значение в процентах..

Некоторые пытаются использовать это свойство для элементов блочного уровня и, естественно, не получают ожидаемого результата. То есть если вы разместите один div внутри другого и захотите вертикально центрировать его, то vertical-align вам не поможет.

Как поступать в таком случае я расскажу в отдельной статье.

Baseline

Значением по умолчанию для vertical-align является baseline. Изображения будут находиться на одной линии с текстом. Обратите внимание, что выступающие элементы символов, выступают за базовую линию. Картинки не выравниваются по этим выступам, поскольку это не базовая линия.

Middle

Возможно, наиболее используемое значение для vertical-align — это «middle» для изображений-иконок. Результат получается довольно кросс-браузерным.

Браузер центрирует высоту текста в пикселях с высотой картинки, опять же, в пикселях:

Необходимо запомнить, если изображение больше чем текущий размер шрифта и высота строки, то оно будет «вытолкнуто» вниз, если это необхоимо.

Text-bottom

Отличается от baseline тем, что изображение выравнивается по нижней линии текста (не базовая линия, а по линии выступающих частей текста). Картинки могут быть выравнены по этой линии таким образом:

Text-top

Противоположностью значения text-bottom является text-top. Самая высокая точка строки текста при текущем размере шрифта. Таким образом вы можете выровнять изображение по этой линии. Обратите внимание, что в примере используется шрифт Georgia, у которого, возможно, есть элементы выше, чем на рисунке. Поэтому вы видите небольшой отступ.

Top и Bottom

Top и Bottom работаю подобно свойствам text-top и text-bottom, но при выравнивании расчёт происходит не по высоте текущего текста, а по высоте максимального элемента в строке (например другой картинки). И при расопложении учитывается именно его верх (или низ).

Sub и Super

Эти значения используются для верхних (superscript) и нижних (subscript) индексов. При использовании этих значений, элементы выстраиваются таким образом:

Vertical Align on Table Cells

В отличии от картинок, у таблиц по умолчанию используется выравнивание по центру (middle).

Если вы хотите выровнять текст по верху или низу ячейки, используйте значения

top

и

bottom

для

vertical-alignment

:

Для вертикального выравнивания в ячейках таблицы, лучше всего использовать только эти значения (top, middle, bottom). Использование других значений может привести к непредсказуемым результатам в разных броузерах. Например, text-bottom прижимает текст к низу в IE 6, а в Safari 4 — к верху. Установка значения sub выравнивает по центру в IE 6, а в Safari 4, опять же, по верхней линии.

Vertical Align и элементы Inline-Block

Изображения, которые технически являются элементами строчного уровня, больше похожи по поведению на элементы с поведением inline-block, потому что можете им устанавливать размеры.

Inline-block-элементы, при вертикальном выравнивании, ведут себя точно так же, как картинки. Однако, стоит помнить, что не все броузеры обрабатывают inline-block-элементы одинаково, и поэтому vertical-align может не оправдать ваших ожиданий. Хотя это уже другая история…

Атрибут «valign»

Иногда вы можете встретить атрибут «valign» для вертикального выравнивания в ячейках таблицы (например, <td valign=top>. Стоит отметить, что этот атрибут является устаревшим и не должен использоваться. Да и зачем, если вы можете добиться желаемого, используя CSS.

css — Выровнять текст по нижнему краю div

спросил 9 лет, 9 месяцев назад

Изменено 2 года, 11 месяцев назад

Просмотрено 396 тысяч раз

Я пытался выровнять свой текст по нижней части div из других сообщений и ответов в Stack Overflow. Я научился справляться с этим с помощью различных свойств CSS. Но я не могу это сделать. В основном мой HTML-код выглядит так:

 <дел>
  Текст

 .обернуть {
  высота: 200 пикселей;
  ширина: 200 пикселей;
  граница: 1px сплошная #aaa;
  поле: 10 пикселей;
  дисплей: гибкий;
}

.wrap диапазон {
  выравнивание: flex-end;
} 

 <дел>
  Выровнять меня по нижнему краю