Размещение содержимого div по центру
Хочу разместить содержимое блока по центру, допустим это горизонтальное меню, как сделать чтобы не указывать ширину блоков, а они подстраивались автоматом под ширину содержимого то есть:
Что бы не указывать ширину ни у ul ни у блоков li
Отслеживать
задан 28 авг 2017 в 11:23
7 1 1 серебряный знак 4 4 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
ul < display: flex; justify-content: center; flex-wrap: wrap; >ul li < list-style: none; >ul a < padding: 5px; display: block; border: 1px solid #ccc; >ul a:hover
Отслеживать
ответ дан 28 авг 2017 в 11:38
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
а flex это новое что то? как оно работает?
28 авг 2017 в 12:21
да новое, но уже имеет хорошую поддержку браузеров — caniuse.com/#feat=flexbox
28 авг 2017 в 12:23
28 авг 2017 в 12:25
Ну, назвать flex «новым» уже сложно, главное что отталкивает — не поодерживается на ie9 (на практике не такой уж и редкий/старый браузер). По этому всегда когда использую flex стараюсь делать проверку и альтернативную верстку, если проверка не пройдена. Да и как правило без flex’ов можно обойтись
28 авг 2017 в 13:08
@MedvedevDev . все зависит от требований по кроссбраузерности. Если ie9 не нужен, используйте flex. + ie9 можно отдельно задать стили
Выравнивание блоков по центру в CSS
Выравнивание содержимого по горизонтали, которое имеет свойство float, можно сделать очень легко и кроме того полностью кроссбраузерно (работает в Opera 8+, Firefox 3+, IE 5.5+).
Пример выравнивания div-блока
Чтобы выравнять блок со свойством float или несколько расположенных в ряд блоков, необходим еще один внешний блок. Внешнему блоку и внутренним блокам назначается position: absolute; и float: left; , внешнему назначить left: 50%; , а внутренним блокам right: 50%; . Для использования float: right; нужно назначить внешнему назначить right: 50%; , а внутренним блокам left: 50%; . Рекомендую очищать float, размещая после выравненных по центру элементов блок со свойством clear: both; .
Таким образом можно добиться такого центрирования:
Границу зеленого цвета имеет внутренний блок с прерывистую красную границу имеет внешний блок с >
HTML-код примера изображенного ниже выглядит так:
CSS-код примера изображенного ниже выглядит так:
#block < position: relative; float: left; left: 50%; border: 1px dashed #a00; >#block-inner < position: relative; float: left; right: 50%; border: 2px solid #0a0; padding: 10px; >#page
Пример выравнивания пунктов меню
Практически данный выше пример можно применить при горизонтальном выравнивании меню сайта. Однако, при этом нужно принять во внимание то, что при достаточно большом количестве пунктов (занимающих по ширине больше половины страницы) появляется горизонтальная прокрутка. Чтобы от нее избавиться нужно во внешнем блоке применить свойство overflow . Если меню выпадающее, то его выпадающие пункты могут срезаться этим внешним блоком. Чтобы избежать этой проблемы, необходимо применять свойство overflow к блоку как можно более объемлющему, например, самому внешнему блоку, обрамляющего все содержимое страницы.
Например можно выравнять меню так:
Границу зеленого цвета имеют пункты li списка ul , прерывистую красную границу имеет список ul .
HTML-код примера изображенного ниже выглядит так:
CSS-код примера изображенного ниже выглядит так:
#menu < position: relative; float: left; left: 50%; border: 1px dashed #a00; list-style: none; margin: 0; padding: 0; >#menu li < position: relative; float: left; right: 50%; border: 2px solid #0a0; padding: 10px; >#page
Так что все довольно просто. Желаю успехов в освоении новых методов.
Выравнивание css div по правому краю – html — Сделать блок div по центру родительского блока, а содержимое блока div выровнять по правому краю
Выравнивание блока по левому краю css. Выравнивание блоков div по центру (css, div html)
Когда Вы печатаете текст в программе Microsoft Word, он печатается по левому краю. Но довольно часто требуется сместить его в другую сторону.
Например, заголовок принято смещать в центр страницы, а чтобы напечатать шапку документа, зачастую нужно сместить текст вправо. Эта процедура называется выравнивание.
— это то, как текст расположен на странице. Он может быть расположен по центру, по левому и правому краю, по ширине. Для этого в программе Word есть специальные кнопки вверху:
О них мы поговорим чуть позже. А пока несколько слов о том, как не нужно выравнивать текст.
Неправильное выравнивание текста
Многие люди по незнанию выравнивают текст неправильно — при помощи кнопки пробел на клавиатуре или кнопки Tab.
Такое смещение считается ошибкой, так как расстояние от левого поля делается на «глазок». Из-за этого оно чаще всего больше, чем нужно. А если Вы таким образом выровняете текст по правому краю, то возникнет масса проблем при его редактировании. Да и сам способ весьма неудобный — приходится много раз нажимать кнопку пробел или Tab на клавиатуре.
Чем это грозит? Например, потеряй деловой репутации. Ведь можно очень быстро проверить оформление текста. Для этого достаточно нажать вот на эту кнопку вверху программы Microsoft Word:
В тексте появятся точки и непонятные значки. Вот точками показываются пробелы. И если Вы неправильно выровняете текст, при такой проверке это сразу же будет видно по множеству точек перед ним.
Чтобы вернуть все обратно — убрать точки и непонятные значки, — еще раз нажмите на кнопку
Между прочим, документ с неправильным выравниванием могут не принять в некоторых организациях.
Как выровнять текст
А сейчас научимся правильно выравнивать текст. Кстати, сделать это можно уже после того, как текст напечатан. Рекомендую именно так и поступать — это и проще, и быстрее.
Для смещения текста в программе Word есть четыре кнопки. Находятся они вверху.
— эта кнопка выравнивает текст по левому краю
— вот эта выравнивает по центру
— по правому краю
— по ширине (делает текст ровным с двух сторон)
А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их. Для этого наведите курсор (стрелку или палочку) в самое начало или в самый конец текста. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в другой конец. Когда текст закрасится другим цветом (обычно черным или синим), это будет означать, что он выделен.
После выделения нажмите по кнопке, которая выравнивает текст по центру. Напечатанные Вами слова должны сместиться в середину страницы.
Вам может показаться, что это неправильный центр. На самом деле, все верно. Ведь поле (отступ) с левой стороны больше, чем с правой.
Таким же способом попробуйте выровнять текст по правому краю.
Что касается кнопки «По ширине». Если у Вас немного текста (пару слов), то Вы не увидите отличий от кнопки «По левому краю» — слова так же сместятся влево. А вот если у Вас несколько абзацев, то текст выровняется по двум сторонам листа — и по левой, и по правой. То есть он будет ровным с двух сторон.
Пример текста, выровненного по левому краю:
Тот же текст, только выровненный по ширине:
Кстати, по правилам оформления документов, основной текст должен быть выровнен именно по ширине.
В данной статье я расскажу, как поместить блок div по центру . Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.
Вообще, есть дюжина способов как правильно выровнять div блок по центру, каждый вебмастер использует свой любимый\наиболее удобный способ. Но тем не менее, есть несколько основных, наиболее популярных и универсальных способа. И конечно-же, валидные по всем современным стандартам.
И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.
Итак, что мы имеем?
Способ 1. Самый крутой
margin:0 auto;
Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.
К примеру, для выравнивания сверху пишем:
Для выравнивания сверху и снизу:
Margin:10px auto 5px;
На мой взгляд — это самый
как выровнять блок (div) по правому краю?
можно так _________________ 9.5.1 Позиционирование перемещаемого объекта: свойство ‘float’ ‘float’ Значение: left | right | none | inherit Начальное значение: none Область применения: все перемещаемые объекты и генерируемое содержимое Наследование: нет Процентное задание: N/A Устройства: визуального форматирования Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл: left Элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства ‘clear’). Свойство ‘display’ игнорируется, если ему не присвоено значение ‘none’. right Подобно значению ‘left’ с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха. none Блок не перемещается.
float: right в коде выглядит так ССS .название класа
margin-left: auto предпочтительнее — не потребуется сброс обтекания после блока.
без всяких классов �� div align=»right»
CSS позиционирование, обтекание элементов и контекст наложения
CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).
В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:
- размерами и типом элемента,
- схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
- отношениями между элементами в дереве документа,
- внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).
Схемы позиционирования
В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:
Нормальный поток
Нормальный поток включает блочный контекст форматирования (элементы с display block , list-item или table ), строчный (встроенный) контекст форматирования (элементы с display inline , inline-block
или inline-table ), и относительное и «липкое» позиционирование элементов уровня блока и строки.
Обтекание
В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right .
Абсолютное позиционирование
В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed; .
Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.
1. Содержащий блок
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body , который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
- Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
- Содержащим блоком элемента с position: fixed; является окно просмотра.
- Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding ;
— если предок — элемент уровня строки, содержащим блоком будет область содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный содержащий блок. - Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.
2. Выбор схемы позиционирования: свойство position
Свойство position определяет, какой из алгоритмов позиционирования используется для вычисления положения блока.
Свойство не наследуется.
Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.
Влияние position: relative; на элементы таблицы определяется следующим образом:
Элементы с table-row-group , table-header-group , table-footer-group иd table-row смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки.
table-column-group , table-column не смещает соответствующий столбец и не оказывает визуального влияния.
table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.
Отступы margin абсолютно позиционированных блоков не схлопываются.
Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с position: absolute; .
Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.
«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.
«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
position: static; position: relative; position: absolute; position: sticky; position: fixed; position: initial; position: inherit;
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
3. Смещение блока: свойства top, right, bottom, left
Элемент считается позиционированным, если свойство position имеет значение, отличное от static . Позиционированные элементы генерируют позиционированные блоки и могут быть расположены в соответствии со следующими четырьмя физическими свойствами:
| top | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
top: 10px; top: 2em; top: 50%; top: auto; top: inherit; top: initial;Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).
| right | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
right: -10px; right: .5em; right: -10%; right: auto; right: inherit; right: initial;Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.
| bottom | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
bottom: 50px; bottom: -3em; bottom: -50%; bottom: auto; bottom: inherit; bottom: initial;Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.
| left | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
left: 50px; left: 10em; left: 20%; left: auto; left: inherit; left: initial;Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.
Положительные значения смещают элемент внутрь содержащего блока, а отрицательные — за его пределы.
4. Обтекание: свойство float
Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.
При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Правила, регулирующие поведение плавающих боков, описываются свойством float .
Свойство не наследуется.
| float | |
|---|---|
| Значение: | |
| none | Отсутствие обтекания. Значение по умолчанию. |
| left | Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю. |
| right | Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю. |
| inherit | Наследует значение свойства от родительского элемента. |
float: left; float: right; float: none; float: inherit;Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.
Плавающие элементы могут использовать отрицательные отступы margin , чтобы перемещаться за пределы области содержимого их родительского элемента.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .
Свойство не оказывает влияние на элементы с display: flex и display: inline-flex . Не применяется к абсолютно позиционированным элементам.
Рис. 2. Обтекание элементов
5. Управление потоком рядом с плавающими элементами: свойство clear
Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.
Свойство не наследуется.
| clear | |
|---|---|
| Значение: | |
| none | Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию. |
| left | Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе. |
| right | Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе. |
| both | Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе. |
| inherit | Наследует значение свойства от родительского элемента. |
clear: none; clear: left; clear: right; clear: both; clear: inherit;Для предотвращения отображение фона или границ под плавающими элементами используется правило .
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.
Рис. 3. Положение элементов вдоль оси Z
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.
Блоки с более высокими уровнями всегда отображаются перед блоками с более низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в соответствии с порядком следования элементов в исходном документе. Блок элемента имеет ту же позицию, что и блок его родителя, если только ему не присвоен другой уровень свойством z-index .
Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.
| z-index | |
|---|---|
| Значение: | |
| auto | Вычисляется в 0 . Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию. |
| целое число | Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;6.1. Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:
- Корневой элемент , который содержит все элементы веб-странице.
- Блочные элементы, неплавающие и непозиционированные.
- Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
- Строковые непозиционированные элементы (текст, изображения).
- Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.
Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform ):
- Корневой элемент , который содержит все элементы веб-странице.
- Позиционированные элементы с отрицательным значением z-index .
- Блочные элементы, неплавающие и непозиционированные.
- Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
- Строковые непозиционированные элементы (текст, изображения).
- Позиционированные элементы со значениями z-index: 0; и z-index: auto; .
css — Выровнять содержимое блока div по нижнему краю
Stack Overflow на русском
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Вой
Выровнять текст по вертикали css в div: Как выровнять текст или блок div по вертикали
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Первый метод с line-height
Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .
первый пример. демо №1
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
Выравнивание со свойством table
Выравнивание со свойством flex
Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.
Выравнивание со свойством transform
И последний в нашем списке, но далеко не последний в использовании способ. Сдвигаем по вертикали элемент на желаемое значение, в данном случае на -50%.
Программирование на C++ с Нуля до Гуру
Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.
Для закрепления материала из уроков к ним идёт множество упражнений.
Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.
Также вместе с курсов Вы получаете Бонус «Программирование на C++ в Unreal Engine», в котором Вы научитесь создавать игры на C++ с использованием этого движка.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.
Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.
В качестве примера рассмотрим следующий фрагмент:
и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.
Решение задачи
«Правильные» браузеры (включая MSIE
Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:
div display: table-cell;
vertical-align: middle;
>
div display: table-cell;
vertical-align: bottom;
>
Internet Explorer (до 7-й версии включительно)
Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):
div position: relative;
>
div span display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
>
Этот набор правил работает и в «правильных» браузерах.
div span display: block;
width: 100%;
>
не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.
Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:
Тогда искомый набор правил будет иметь следующий вид:
div position: relative;
>
div span display: block;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
>
div span span position: relative;
top: -50%;
>
Смысл этого решения в том, что внутренний элемент позиционируется по вертикали абсолютно на половине высоты блока, а затем смещается вверх на половину собственной высоты. Используется неправильная интерпретация высоты в MSIE.
Существует другой способ решения этой задачи для MSIE — использование expression . Недостаток этого подхода — выравнивание не будет работать при отключенном Javascript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).
Заключение
Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).
Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.
Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.
Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.
Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.
Для блочных элементов свойство vertical-align не работает.
Есть два способа, как можно выйти из этой ситуации:
Для тех, кто предпочитает все смотреть в видео:
Для тех, кто любит текст, читайте ниже способ решения этой проблемы.
Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.
Способ Б. Использовать своство display:table-cell;
Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.
Ситуация 1. Выравнивание одной строки текста.
Рассмотрим простой пример.
Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.
Этот способ хорошо работает, когда у вас всего одна строка с текстом.
Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.
Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.
Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.
Есть еще более современное решение этой проблемы — использование flexbox.
Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.
Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.
vertical-align — CSS — Дока
- Кратко
- Пример
- Как это понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
Кратко
Секция статьи «Кратко»
Свойство vertical — align выравнивает текстовые элементы по вертикали относительно друг друга.
�� Для простого текста это не особо актуально, то вот для строчно-блочных ( inline — block ) элементов это свойство может быть очень полезным.
Пример
Секция статьи «Пример»
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical — align они будут разной высоты:
.element < display: inline-block; width: 50px; height: 50px; background-color: white;>.medium < height: 100px;>.big < height: 150px;>.element < display: inline-block; width: 50px; height: 50px; background-color: white; >.medium < height: 100px; >.big
Открыть демо в новой вкладке
Все три блока по умолчанию выровнялись по нижней границе. Это стандартное поведение. Изменим его и выровняем элементы по верхней границе:
.element < vertical-align: top;>.element
Открыть демо в новой вкладке
Как это понять
Секция статьи «Как это понять»
С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.
Как пишется
Секция статьи «Как пишется»
Значение свойства vertical — align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.
Рассмотрим доступные значения на примере с котиком ��:
- baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
Открыть демо в новой вкладке
- top — верхняя граница элемента находится на уровне верхней границы строки.
Открыть демо в новой вкладке
- middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
Открыть демо в новой вкладке
- bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.
Открыть демо в новой вкладке
- sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
Открыть демо в новой вкладке
- super — работает почти как sub , только поднимает базовую линию вверх.
Открыть демо в новой вкладке Открыть демо в новой вкладке Открыть демо в новой вкладке
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline . Процент рассчитывается от line — height родительского элемента.
Подсказки
Секция статьи «Подсказки»
�� Свойство vertical — align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
�� На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально ��
�� Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.
На практике
Секция статьи «На практике»
Алёна Батицкая советует
Секция статьи «Алёна Батицкая советует»
�� Свойство vertical — align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text — align . И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
�� С появлением флексбоксов выравнивание по вертикали производится при помощи align — items . Поэтому на свойство vertical — align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
Как выровнять текст по вертикали css
Как вертикально центрировать текст с помощью CSS
Довольно часто выравнивание элементов по горизонтали может представлять трудность. Но есть много способов вертикального центрирования, которые очень легко применяются.
Используйте свойство vertical-align
Свойство vertical-align используется для вертикального центрирования строчных элементов.
Значения для vertical-align выравнивают элемент относительно родительского элемента.
- Значения line-relative вертикально выравнивают элемент относительно всей строки.
- Значения для ячеек таблицы относительны к table-height-algorithm, который обычно указывает на высоту строки.
Пример
Используйте CSS Flexbox
С Flexbox можно выровнять элементы по вертикали или по горизонтали с помощью свойств align-items, align-self, и justify-content.
Пример
Используйте CSS display:table
В данном методе мы отобразим элементы как таблицы и ячейки таблиц, и контент будет центрирован с помощью свойства vertical-align .
Пример
Используйте свойство line-height
Данный метод может быть использован для вертикального центрирования одной строки текста. Добавьте свойство line-height к элементу, содержащему текст, где высота строки больше, чем размер шрифта. По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста, и получится вертикально центрированный текст.
Пример
Следующий метод работает для одной строки или же нескольких строк текста, но этот метод требует фиксированной высоты контейнера.
Пример
Задайте равные верхние и нижние отступы
В этом методе верхние и нижние отступы родительского элемента будут равными
Пример
Если нужно задать отступы, используйте %. Данный метод требует некоторые вычисления, чтобы понять, какие значения необходимо установить для top и bottom для их динамического роста. Если установить относительную высоту, вычисления не потребуются.
Задайте абсолютное позиционирование и отрицательные поля
Этот метод используется с блочными элементами. Не забудьте установить высоту элемента, которую хотите центрировать.
- Задайте #parent и #child
- Задайте top: 50%; и left: 50%; для центрирования левого края child .
- Задайте child и таким образом, чтобы он перемещался вверх и налево.
- Установите отрицательное поле, оно уменьшает наполовину высоту и толщину.
Пример
Задайте абсолютное позиционирование и растягивание
С помощью этого метода, мы указываем, чтобы браузер автоматически задал поля дочернего элемента таким образом, чтобы они стали равными.
- Задайте parent и child
- Задайте child
- Задайте 4 margin: auto; все поля станут равными и child станет центрированным по вертикали, а также по горизонтали.
Пример
Задайте свойство transform
Если мы имеем position: absolute; left: 50%; top: 50%;, вычисления делаются с левого верхнего угла. Для центрированного позиционирования текста необходимо переместить текст на -50% налево и на 50% вверх с помощью transform: translate (-50%;-50%).
Пример
Используйте floater div
Этот метод требует пустой div, который будет floated.
Этот метод требует пустой div.
- Float: floater слева или справа.
- Задайте Height: 50%;
- Пустой дочерний элемент.
- Очистите child , используя clear: property.
Необходимо выставить дочерний элемент на расстоянии, равной половину высоты. Для этого нужно задать отрицательные значения свойства margin-bottom: на floater
Как выровнять текст или блок div по вертикали | CSS
Вместо того, чтобы задавать высоту родителю, можно расширить отступ элемента.
line-height = height
Если высоту строки (свойство line-height) сделать равной высоте блока (свойство height), то вложенный элемент разместиться по центру.
Вертикальное выравнивание иконок и смайликов
display: table-cell; и vertical-align: middle;
vertical-align и :before
Не вижу ограничений по использованию.
position: absolute; (или position: fixed;) и картинки
Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.
position: absolute; (или position: fixed;) и отрицательный margin
position: absolute; (или position: fixed;) и transform: translate
display: flex; и margin: auto;
30 комментариев:
usf вроде и все просто, но часто в уже готовой верстве приходится бубном плясать, чтобы простые выравнивания сделать правильно) NMitra ))) Возвращаемся к верстке таблицами, только через display: table; Анонимный Спасли; display: table-cell у меня не работал, а все такие простые, только у вас написано, что родительскому блоку нужно давай display: table!
Спасибо! �� NMitra td без table не используется, здесь всё тоже самое. Встречала, правда, экспериментаторов, которые родителю присваивают display: table-cell, но не считаю это лучшим вариантом. Анонимный hggf Irene vertical-align: middle — оказалось то, что надо. У меня идёт строка текста, затем блок div, в котором иконки соцсетей. Текст нужно было поднять. Билась, билась. И, ура, нашла эту статью! Большое спасибо. Дакпа Чойдон Спасибо, хорошо объяснили, всё получилось через vertical-align NMitra Странно, а я применяю все варианты.
Да, для разных случаев, но все. gray как ни странно, последний пример (Для резинового блока, заданного в процентах применяется position: absolute; с transform: translate.) корректно отображается только в Опере 12.
В Опере 18, 19, 20, Next; а так же в Хроме 31, Я.браузере 13 — .blok1 (зеленый) располагается в нижней правой четверти. gray потратив некоторое время на решение этой задачи было найдено решение, работающее во всех перечисленных выше браузерах:это резиновая таблица NMitra Очень много кода получилось ((( Яндекс и Хром на одной платформе стоят, по хорошему результат должен быть одним и тем же. gray Много кода — это да.. но это единственный способ, которым мне удалось отцентровать резиновый блочный элемент. Кстати, в CSS это выглядит так:
.xalign display: table;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
>
. xalign div display: table-cell;
vertical-align: middle;
>
таблица
png»/> 
iner < 