direction в CSS


Содержание

direction

Браузер Internet Эксплорер Нетscape Опера Safari Файер фох
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию ltr
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.ШТМЛ#propdef-direction

Описание

direction предназначен для сайтов, в которых имеет значение направление контента. Например, при использовании арабского алфавита чтение происходит справа налево.

Атрибут direction дастаткова универсален и управляет следующими возможностями:

  • способ отображения контента в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки контентового блока при text-align : justify .

Для использования со встроенными элементами, значение атрибута unicode-bidi должно быть задано как embed или override .

Синтаксис

direction: ltl | rtl

Значения

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоска прокрутки в браузере Internet Эксплорер отображается слева.

Рис. 1. Результат использования direction в браузере Internet Эксплорер

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.

Рис. 2. Применение direction к таблице

Браузеры

При добавлении атрибута direction со значением rtl к блоку с полосой прокрутки (например,

), браузер Internet Эксплорер, Файер фох и Нетscape отображают скроллинг слева, а Опера и Safari — справа.

Direction в CSS

Свойство direction указывает направление чтения текста – слева направо или справа налево и выравнивает его по горизонтали внутри элемента, влияя при этом на расположение символов пунктуации. Свойство unicode-bidi дополняет свойство direction .

Это свойство применимо ко всем элементам.

Также это свойство задает порядок расположения колонок и положение полосы прокрутки в блоке. (Эти возможности поддерживаются не всеми браузерами).

Значение

— ltr (left to right) – указывает направление слева направо, текст располагается слева,

— rtl (right to left) – указывает направление справа налево, текст располагается справа. Конечные символы пунктуации перемещаются в начало,

— inherit — принимает значение свойства родительского элемента.

Значение по умолчанию

Пример

Пример — Свойство direction

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойство direction

: ltr «> Всем привет!

: rtl «> Всем привет!

: rtl «> Обратили внимание на расположение знаков?

Свойство flex-direction

Свойство flex-direction устанавливает направление главной и поперечной оси или, говоря другими словами, расставляет элементы в ряд или в колонку.

Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow.

Синтаксис

Значения

Значение Описание
row Главная ось направлена слева направо. Элементы расположены в ряд, по умолчанию прижаты к левому краю, их нумерация имеет обычный порядок — слева направо.
row-reverse Главная ось направлена справа налево. Элементы расположены в ряд, по умолчанию прижаты к правому краю, их нумерация имеет обратный порядок — справа налево.
column Главная ось направлена сверху вниз. Элементы расположены в колонку, по умолчанию прижаты к верху, их нумерация имеет обычный порядок — сверху вниз.
column-reverse Главная ось направлена снизу вверх. Элементы расположены в колонку, по умолчанию прижаты к низу, их нумерация имеет обратный порядок — снизу вверх.

Значение по умолчанию: row.

Пример . Значение row

Элементы расположены в ряд, по умолчанию прижаты к левому краю, их нумерация имеет обычный порядок — слева направо:

direction

Easily manage projects with monday.com

The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

The valid values are:

  • ltr — Left to Right, the default
  • rtl — Right to Left
  • inherit — inherits its value from the parent element

The text on this page is set in the default ltr direction. The most common use case to set rtl is for web pages with Hebrew or Arabic text. Here is an example of Arabic set in rtl:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

There is an HTML attribute for setting the direction as well:

Both the CSS property and the HTML attribute will cascade the direction to descendent elements. It is recommended you use the HTML attribute, as that will work even if CSS fails or doesn’t affect the page for any reason.

There is also a specific HTML tag that can be used for changing the direction of text: the bidirectional override element. This exists so there is a semantics-free element to use just for this purpose. For instance:

To pair all this with CSS.

When creating layouts in a pre-flexbox pre-grid world, people often chose between floats and inline-block to create columns. One advantage to inline-block, other than removing the need to clear the float, is that changing the direction property reverses the layout as well. This isn’t true for floats, which would need to be reset if a webpage supports multiple languages and the language direction changed from ltr to rtl or vice versa.

If you need to change the direction of an inline element (against what its parent block level element is), you’ll either need to use the element, or ensure the inline element sets the unicode-bidi property properly:

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству flex находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

display

inline-flex
русский
english

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

Применяется ко: всем элементам.

flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

flex-direction

row-reverse
column
column-reverse
русский
english

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Илон Маск рекомендует:  Селекторы атрибутов

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

flex-wrap

nowrap
wrap-reverse
русский
english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

flex-flow


row nowrap
column-reverse
column wrap
row-reverse wrap-reverse
русский
english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: row nowrap.

order

русский
english

Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

Применяется к: flex элементам.

Значение по умолчанию: 0.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

Initial: 0.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
русский
english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

align-items

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

Илон Маск рекомендует:  Что такое код mcal_delete_event

align-self

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
русский
english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

CSS flex-direction Property

The flex-direction property defines the main axis of a flex container and sets the order in which flex items appear.

The flex-direction property is one of the CSS3 properties.

The flex-direction property is a part of the Flexible Box Layout module.

Flex items can be displayed:

  • horizontally along the row from left to right (flex-direction:row) or right to left (flex-direction:row-reverse)
  • vertically from top to bottom (flex-direction:column) or from bottom to top (flex-direction)

If there are no flexible items, the flex-direction property has no effect.


Initial Value row
Applies to Flex containers.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.flexDirection = «row-reverse»;

Syntax

Example

In the following example «row-reverse» value is used where items are displayed horizontally as a row from right to left.

Илон Маск рекомендует:  Легковесные процессы и синхронизация

Центрирование в CSS: Полное руководство

Вещи, связанные с центрированием в CSS , это, пожалуй, олицетворение того, на что чаще всего жалуются пользователи. Это на самом деле должно быть так сложно? — иронично интересуются они.

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

Поэтому давайте создадим дерево решений и, надеюсь, теперь этот вопрос станет для вас проще.
Мне нужно отцентрировать элементы…

Горизонтально

Это элементы inline или inline-* (например, текст или ссылки)?

Вы можете отцентрировать элементы inline горизонтально, в родительском элементе block-level с помощью:

Это будет работать для inline , inline-block , inline-table , inline-flex и т.д.

Это элемент уровня блока?

Вы можете отцентрировать элемент block-level , придав ему margin-left и margin-right или auto ( при этом также нужно задать width , в противном случае это будет полная ширина, и центрирование не потребуется ). Это часто делается в подобных сокращениях:

Это будет работать независимо от ширины элемента block-level или родительского элемента.
Обратите внимание, что вы не можете использовать привязку к центру float . Хотя, существует способ .

У вас есть более чем один элемент block-level?

Если у вас есть два или более элемента block-level , которые должны быть отцентрированы горизонтально в ряд, скорее всего вам лучше применить для них разные типы display . Вот примеры, как сделать из них inline-block и flexbox :

Если только вы не хотите расположить несколько элементов block-level друг над другом. В этом случае по-прежнему прекрасно работает техника автоматического отступа:

Вертикально

Вертикальное центрирование в CSS немного сложнее

Это элементы inline или inline-* ( например, текст или ссылки )?

Это одиночная строка?

Иногда линейные / текстовые элементы могут центрироваться по вертикали, просто потому, что отступ снизу и сверху равны:

Если отступ по некоторым причинам для вас это не вариант, и вы хотите отцентрировать текст, который не будет оборачивать, существует прием, аналогичный тому, что мы делали с line-height :

Это несколько строк?

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

Если выравнивание в формате таблицы неприменимо для вас, возможно, вы могли бы использовать flexbox ? Один дочерний элемент flex может легко быть отцентрирован внутри родительского элемента flex :

Имейте в виду, что это актуально только для тех случаев, когда контейнер имеет фиксированную высоту ( в пикселях, процентах и т.д. ), поэтому для контейнера здесь задана высота.

Если оба этих метода неприменимы, вы могли бы использовать технику « призрачного элемента «, в которой внутри контейнера по всей высоте размещается псевдо-элемент и текст вертикально выравнивается с помощью этого элемента:

Это элемент block-level?

Вы знаете высоту элемента?

Довольно часто вы можете не знать высоту в макете веб-страницы по многим причинам: если ширина изменяется, текст адаптивный и может изменять высоту. Высота текста может меняться в зависимости от различных применяемых к нему стилей.

Элементы с фиксированным соотношением сторон, например, изображения, могут изменять свою высоту при изменении ширины. И т.д.

Но если вы знаете высоту, вы можете выровнять элемент по центру следующим образом:

Высота элемента неизвестна?

Его все равно можно отцентрировать, сдвинув его вниз на половину экрана, а затем подвинув вверх на половину высоты элемента:

Можем ли мы использовать flexbox .

В самом деле, с помощью flexbox это делается намного проще:

Горизонтально и вертикально

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

Это элементы с фиксированной шириной и высотой?

Использование отрицательных полей, равных половине ширины и высоты элемента, после того, как вы абсолютно позиционировали их на 50% / 50% от размеров родительского элемента, будет поддерживаться большинством браузеров:

Это элемент с неизвестными шириной и высотой?

Если вы не знаете, ширину или высоту элемента, вы можете использовать свойство преобразования и отрицательный перевод на 50% в обеих плоскостях ( этот метод основан на текущей ширине / высоте элемента ) в центр:

Можем мы использовать flexbox?

Чтобы отцентрировать элемент в двух плоскостях с помощью flexbox , нам нужно использовать два свойства центрирования:

Заключение

Теперь вы можете центрировать любые элементы с помощью CSS .

Данная публикация представляет собой перевод статьи « Centering in CSS: A Complete Guide » , подготовленной дружной командой проекта Интернет-технологии.ру

Блог Vaden Pro

  • 26 просмотров

Характеристики свойства

В каких браузерах работает?

6.0+ 2.0+ 9.2+ 1.3+ 1.0+ 1.0+ 1.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
+ + +

Для чего используется?

Такое свойство достаточно полезно для мультиязычных веб ресурсов, где используются некоторые языки, которые могут читаться не только слева на право, но и наоборот. К примеру, иврит пишется с права налево.

Свойство direction имеет несколько полезных функций:

  • направление текста;
  • очередность столбцов в веб-таблице;
  • расположение скрола;
  • вывод последней строчки при text-align: justify.

CSS animation-direction

The CSS animation-direction property allows you to specify which direction an animation will be played in.

You can specify whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the animation-timing-function is also reversed. For example, when played in reverse, a animation-timing-function of ease-out would appear to be ease-in .

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • This property is defined in CSS Animations Level 1 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS direction Property

Description

The direction property specifies:

  • the base writing direction (right to left, or left to right) of blocks.
  • the direction of embeddings and overrides for the Unicode bidirectional algorithm (see unicode-bidi property).
  • the direction of table column layout.
  • the direction of horizontal overflow .
  • the position of an incomplete last line in a block, when the value of text-align property is set to justify .

The following table summarizes the usages context and the version history of this property.

Default value: ltr
Applies to: All elements
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 2, 3

Note: Unlike the dir attribute in HTML, the direction CSS property, when specified for table column elements, is not inherited by cells in the column since CSS inheritance follows the document tree, and rows are the ancestors of the cells in the document tree not the columns.

Syntax

The syntax of the property is given with:

direction : ltr | rtl | initial | inherit

The example below shows the direction property in action.

Example

  • p <
  • direction : rtl ;
  • unicode-bidi : bidi-override ;
  • >

Note: For the direction property to affect reordering in inline elements, the unicode-bidi property’s value must be embed or override .

Property Values

The following table describes the values of this property.

Value Description
ltr Sets a left-to-right direction. This is default value.
rtl Sets a right-to-left direction.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element direction property.

Browser Compatibility

The direction property is supported in all major modern browsers.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL