html — CSS прижать блок к низу родителя
Вопрос задан
Изменён 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
спросил
Изменено 2 года, 11 месяцев назад
Просмотрено 396 тысяч раз
Я пытался выровнять свой текст по нижней части div из других сообщений и ответов в Stack Overflow. Я научился справляться с этим с помощью различных свойств CSS. Но я не могу это сделать. В основном мой HTML-код выглядит так:
<дел>
Текст
Эффект в том, что в FF я просто получаю вертикальную линию (div в свернутом виде), а текст пишется рядом с ней. Как я могу предотвратить схлопывание div
, но при этом ширина соответствует тексту?
- css
- html
- текст
- вертикальное выравнивание
Flex Solution
Совершенно нормально, если вы хотите работать с дисплеем: table-cell
решение. Но вместо того, чтобы ломать его, у нас есть лучший способ сделать то же самое, используя display: flex;
. flex
— это то, что имеет достойную поддержку..обернуть { высота: 200 пикселей; ширина: 200 пикселей; граница: 1px сплошная #aaa; поле: 10 пикселей; дисплей: гибкий; } .wrap диапазон { выравнивание: flex-end; }
<дел>
Выровнять меня по нижнему краю