Что значит выравнивание bottom

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

Обратите внимание, что в этом случае использования, свойство применяется к элементу 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» для вертикального выравнивания в ячейках таблицы (например, . Стоит отметить, что этот атрибут является устаревшим и не должен использоваться. Да и зачем, если вы можете добиться желаемого, используя CSS.

Источник Свойство CSS vertical-align Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами. Синтаксис CSS vertical-align Где value может принимать следующие значения: baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя) bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех) middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента sub - отображение происходит под строкой (выглядит как подстрочный индекс) super - отображение происходит над строкой (как верхний индекс) text-bottom - выравнивание нижней границы элемента по нижнему краю строки text-top - выравнивание верхняя границы элемента по верхнему краю строки top - выравнивание верхняя края элемента по верху самого высокого элемента строки inherit - наследует значение родителя значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз Значение vertical-align по умолчанию: baseline (для строчных элементов) middle (для ячеек таблицы) Вертикальное выравнивание в таблицах Чаще всего vertical-align используется в ячейках таблиц. В теге используют атрибут valign . Синтаксис CSS valign для таблиц Где value может принимать следующие значения: baseline - выравнивание по базовой линии первой текстовой строки bottom - выравнивание по нижнему краю ячейки таблицы middle - выравнивание по середине ячейки top - выравнивание верхнему краю ячейки Преобразуется на странице в следующее: Выравнивание по верху Выравнивание по середине Выравнивание по низу Примеры с вертикальными выравниваниями Пример 1. Значения vertical-align: baseline, bottom, top, sub Пример 2. Значения vertical-align: абсолютные значения и проценты Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами. Преобразуется на странице в следующее: Исходная строка. Текст с выравниванием на 10 пикселей вверх Исходная строка. Текст с выравниванием на 5 пикселей вниз Исходная строка. Текст с выравниванием на 50% вверх Исходная строка. Текст с выравниванием на 30% вниз Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой). Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию: Источник Все про CSS выравнивание Каждый верстальщик постоянно сталкивается с необходимостью выравнивания контента в блоке: по горизонтали или по вертикали. Есть несколько неплохих статей на этот счет, но все они предлагают много интересных, но мало практичных вариантов, из-за чего приходится тратить лишнее время, чтобы выделить главное. Решила подать эту информацию в той форме, которая удобна мне, чтобы больше не гуглить. Выравнивание блоков с известными размерами Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания). Выравнивание при помощи padding Иногда можно не центрировать элемент, а добавить ему границы свойством "padding". Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. Выравнивание абсолютно позиционированных блоков Если для блока задано "position: absolute", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top","right","bottom","left") внутреннего блока присвоить одинаковое значение, а также "margin: auto". *Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). Горизонтальное выравнивание Выравнивание посредством "text-align: center" Для выравнивания текста в блоке есть специальное свойство "text-align". При установленном значении "center" каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок. Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац - ведь суть не с нем, а суть в выравнивании. Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов ("display: inline"). Выравнивание блоков при помощи margin Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto" (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет. Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить. Вертикальное выравнивание С вертикальным выравниванием намного больше проблем - по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые. Выравнивание свойством line-height В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height" и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах. Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle". У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя. Выравнивание по вертикали в таблицах Свойство "vertical-align" также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell". Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом. Источник Свойство vertical-align Это перевод статьи Ире Адеринокун «The vertical-align property». Свойство vertical-align управляет вертикальным выравниванием элементов внутри своих родителей. Оно применяется к строчным элементам и к ячейкам таблиц. У него десять возможных значений: baseline sub super text-top text-bottom middle top bottom указание расстояния указание процентов Типографские единицы измерения Разные значения свойства vertical-align зависят от определённых типографских единиц измерения. Поэтому, чтобы понимать эти значения, для начала нужно понять эти единицы изменения. Существует семь таких единиц, на которых базируются значения свойства. Типографские единицы измерения Цвет Единица Описание baseline базовая линия шрифта subscript baseline базовая линия нижнего индекса строки superscript baseline базовая линия верхнего индекса строки x height высота буквы «x» шрифта line height высота строки font top верхняя линия, верхняя граница шрифта font bottom нижняя линия, нижняя граница шрифта Значения Свойство vertical-align устанавливает вертикальное выравнивание строчным элементам или ячейкам таблицы согласно этим типографским единицам. В зависимости от того, к какому элементу они применяются (строчному или к ячейке таблицы), значения могут иметь немного разный смысл. Baseline (базовая линия) Значение baseline для строчных элементов выравнивает базовую линию текущего элемента по базовой линии родительского. В примере ниже, у квадрата следующие стили: Базовая линия для строчных элементов Для табличных элементов свойство выравнивает содержимое ячейки по базовой линии всех других ячеек в этой строке, выравненных по базовой линии в одном ряду. В примере ниже у всех ячеек в подсвеченной строке установлено значение baseline . Базовая линия для ячеек таблицы Значение sub для строчных элементов выравнивает базовую линию текущего элемента по базовой линии нижнего индекса родительского элемента. Значение sub для строчных элементов Для табличных элементов это значение приводит к такому же результату, как и baseline . Super Значение super для строчных элементов выравнивает базовую линию текущего элемента по базовой линии верхнего индекса родительского элемента. Значение super для строчных элементов Для табличных элементов это значение приводит к такому же результату, как и baseline . Text-top Значение text-top для строчных элементов выравнивает верхнюю границу текущего элемента по верхней линии шрифта родительского элемента. Значение text-top для строчных элементов Для табличных элементов это значение приводит к такому же результату, как и baseline . Text-bottom Значение text-bottom для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе шрифта родительского элемента. Значение text-bottom для строчных элементов Для табличных элементов это значение приводит к такому же результату, как и baseline . Middle Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии. Значение middle для строчных элементов Для табличных элементов это значение выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box). Значение middle для ячеек таблицы Значение top для строчных элементов выравнивает верхнюю границу текущего элемента по верхней границе всей строки, на которой находится элемент. Это значение не обязательно связано со шрифтовыми элементами в строке. Значение top для строчных элементов Для табличных элементов это значение выравнивает содержимое текущей ячейки по верхнему краю строки с учётом внутреннего отступа. Значение top для ячеек таблицы Bottom Значение bottom для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе всей строки, на которой находится элемент. Значение bottom для строчных элементов Для табличных элементов это значение выравнивает содержимое текущей ячейки по нижнему краю строки с учётом внутреннего отступа. Значение bottom для ячеек таблицы Расстояние Указанное значение для строчных элементов передвигает базовую линию текущего элемента на указанное расстояние относительно базовой линии родительского элемента. На примере ниже, розовый квадрат имеет следующие стили: Смещение базовой линии с помощью указания расстояния Для табличных элементов это значение приводит к такому же результату, как и baseline . Проценты Указание значения в процентах для строчных элементов передвигает базовую линию текущего элемента относительно базовой линии родительского элемента на расстояние, равное заданному проценту от высоты строки родительского элемента. На примере ниже, розовый квадрат имеет следующие стили: Смещение базовой линии с помощью указания процентов Для табличных элементов это значение приводит к такому же результату, как и baseline . Источник