Css расположить по центру: Выравнивание по центру в CSS

Содержание

Выравнивание блока div со свойством position:absolute или fixed по центру.

Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

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

Когда блоки идут в нормальном потоке, выровнять один, по центру, относительно родительского блока, в котом он находиться, не составляет особого труда.

Для этого используется стандартная CSS конструкция margin:auto.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

<div>
<div></div>
</div>

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>

position:absolute; — собственно говоря, само абсолютное позиционирование.

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

Сегодня я расскажу о трюке, который используется в этом случае. На самом деле все достаточно просто, нужно только добавить два CSS-свойства для выравниваемого блока.

<div>
<div></div></div>

left:50%; — смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

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

<div>
<div></div>
</div>

Если по центру нужно выровнять строку с текстом:

<p>Строка текста</p>

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

Выравнивание элементов во Flex контейнере — CSS

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content.

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

В этом руководстве рассматриваются следующие свойства:

justify-content — управляет выравниванием элементов по главной оси.
align-items — управляет выравниванием элементов по перекрёстной оси.
align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи

align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl).

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto.

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

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

Выравнивание Коробки
Выравнивание Коробки в Flexbox (Гибкая Коробка)
Выравнивание Коробки в Grid Layout (Макет Сетки)

Выравнивание блоков в CSS разметке Grid — CSS

Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнём с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов — оси блока или столбца, оси inline или строки. Ось блока — это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.

Внутренняя ось (inline axis) проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.

Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.

Элементы управления align-self и align-items на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.

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

auto
normal
start
end
center
stretch
baseline
first baseline
last baseline

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Имейте в виду, что после установки align-self: start высота каждого дочернего <div> будет определяться содержимым <div>. Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого <div> растягивается, чтобы заполнить его область сетки.

Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвёртый center.

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Элементы с внутренним соотношением сторон

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

Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки align-self и justify-self (en-US) start. Это будет имитировать правильное поведение после его реализации.

Поскольку align-items и align-self обрабатывают выравнивание элементов на оси блока, justify-items и justify-self (en-US) выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для align-self.

auto
normal
start
end
center
stretch
baseline
first baseline
last baseline

Вы можете увидеть тот же пример, что и для align-items ниже. На этот раз мы применяем свойство justify-self (en-US).

Опять же, значение по умолчанию stretch, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Как и align-self и align-items, вы можете применить justify-items к контейнеру сетки, чтобы установить значение justify-self (en-US) для всех элементов.

Свойства justify-self (en-US) и justify-items не реализованы в flexbox. Это связано с одномерным характером flexbox и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство justify-content.

Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

<div>
 <div>Item 1</div>
</div>

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с align-content выравниванием дорожек на оси блока и justify-content, выполняющим выравнивание по встроенной оси. Значения для align-content и justify-content:

normal
start
end
center
stretch
space-around
space-between
space-evenly
baseline
first baseline
last baseline

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Если я добавлю align-conten в мой контейнер со значением end, все треки перейдут в конечную строку контейнера сетки в размерности блока:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: end;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения space-between, space-around и space-evenly. Если мы обновим align-content до space-between, вы увидите как выглядят элементы на нашем пространстве grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.

В приведённом ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

На оси inline мы можем использовать justify-content для выполнения того же типа выравнивания, что мы использовали align-content для оси блока.

Используя тот же пример, я устанавливаю justify-content space-around. Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
  justify-content: space-around;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Другой способ выравнивания элементов внутри их области — использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в auto, вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в auto с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.

В следующем примере я дал элементу 1 левое поле auto. Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter:

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

CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.

Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left, или абсолютно позиционирующий элемент, используя top, right, bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.

Как выровнять HTML изображение по центру

Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.

В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.

Центрирование в параграфе

В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.


<p>
    <img src="//msiter.ru/image.jpg" alt="изображение в центре параграфа" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

Центрирование при помощи отступов

Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.


<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

Центрирование при помощи тега <center>

Следует помнить, что тег <center> является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

Нам не хотелось бы использовать устаревшие элементы в статье, поэтому здесь нет демонстрации этого примера, только код.


<center>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</center>

Центрирование при помощи атрибута align=middle

Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».


<img align="middle" src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />

Выравнивание изображения по центру по вертикали

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

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


<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

Одновременное центрирование по горизонтали и по вертикали

Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.


<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

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

Выравниваем картинки по центру в HTML

Как выровнять картинки по центру?

Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.

Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.

Способ 1

Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.

HTML

CSS

.center-img {
display: block;
margin: 0 auto;
}

.center-img {

display: block;

margin: 0 auto;

}

Кстати, этот способ позволяет выравнивать любые блочные элементы: div, p, заголовки.

И, сразу, посмотрите выравнивание на практике:

See the Pen Выравнивание изображений по центру by Alex (@Asmodey) on CodePen.

Этот способ удобен тем, что мы автоматически переносим изображение на следующую строку (поскольку задали ей display: block), и тем, что мы можем задать отступы от текста сверху и снизу с помощью изменения свойства margin.

Способ выравнивания 2

Второй способ, выравнивания изображения – это помещение картинки в параграф, которому мы присвоим класс. После чего, зададим параграфу выравнивание текста по центру.

HTML

<p>

</p>

CSS

.center-img {
text-align: center;
}

.center-img {

text-align: center;

}

И на практике:

See the Pen Выравнивание изображений способ 2 by Alex (@Asmodey) on CodePen.

В данном случае получается код CSS более лаконичным, но HTML содержит больше элементов. Если нравится – используем.

Третий способ

Данный вариант основан на новых семантических тегах HTML5 и его рекомендуется использовать если у вас есть возможность (и необходимость) завернуть картинку в тег figure.

Итак, есть изображение с подписью в теге figure. Поскольку figure — это блочный элемент, то просто задайте ему выравнивание по центру.

HTML

<figure>
<img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» >
<figcaption>Толстый кот</figcaption>
</figure>

<figcaption>Толстый кот</figcaption>

</figure>

CSS

figure {
text-align: center;
}

figure {

text-align: center;

}

И на практике

See the Pen figure выравниваем по центру by Alex (@Asmodey) on CodePen.

Вывод: мы рассмотрели три простых способа выровнять изображение по центру HTML страницы с помощью CSS. Если есть вопросы – пишите.

CSS. Выравнивание картинки по центру

Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода.

Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство text-align:center. И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока:

<p>Текст параграфа.</p>

  <div>
    <img src="фото.gif" border="0" alt="" />
  </div>

<p>Далее по тексту параграфа.</p>

Для этого дополнительного блока присваивается соответствующие CSS-свойство:

.imgCenter {text-align:center;}

Всё это было необходимо потому, что Internet Explorer пятых версий не поддерживает уже тогда существовавшее и поддерживаемое другими браузерами свойство внешних отступов auto, которое автоматически налету присваивает одинаковое расстояние слева и справа от выравниваемого элемента. Вышеприведённый способ всё ещё используется.

Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее:

<p>Текст параграфа. <img src="Фото.gif" border="0" alt="" /> Далее по тексту параграфа.</p>

Отсутствие ненужных дополнительных блоков достигается благодаря соответствующему CSS:

.center {display:block; margin:0 auto;}

Свойство display:block присваивает картинке характеристику блочного элемента, что избавляет от необходимости использовать <div> или <p> вокруг картинки. Далее декларация margin:0 auto присваивает верхнему и нижнему отступам нулевое значение, а левому и правому отступам — автоматически равнозначное значение, которое выравнивает картинку по центру.

Нужно присвоить разные отступы сверху и снизу? Без проблем. Не забываем про сокращения:

.imgCenter {display:block; margin:15px auto 25px;}

К сожалению, в отличие от случаев выравнивания картинок по левому и правому краям (float:left и float:right), нет возможности стандартными методами завёртывать текст вокруг отцентрованной картинки. Конечно, если это очень важно, то выполнимо.

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

Вышеописанный метод выравнивания больше всего подойдёт для сайтов, которые используют картинки внутри текста (новости, статьи). Для фотогалерей, конечно же, существуют свои, более изощрённые способы выравнивания картинок.

Как Центрировать/Центрировать Аудиоплеер Html По Центру Веб-Страницы?

проблема

Я пытался центрировать/центрировать мой аудиоплеер HTML, чтобы он находился в центре/центре моего статического веб-сайта GitHub Pages. Я пробовал это в HTML и CSS. Я несколько раз удалял кеш, чтобы убедиться, что это не является корнем моих проблем. Браузер Chrome/Mac OS 10.14.

Фрагмент кода

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытки пока

Попытка № 1 — создайте класс ‘center’ и примените inline

Верх кода (в тегах стиля):

  .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Нижняя часть кода: <source src="etc.mp3" type="audio/mpeg"/>

Попытка № 2 — добавление тега id в аудиоплеер и выравнивание текста по центру

Верх кода (в тегах стиля):

#audio {
text-align: center;
}

Нижняя часть кода: <source src="etc.mp3" type="audio/mpeg"/>

Попытка № 3 — добавьте теги div вокруг аудиоплеера и выровняйте текст по центру

Верх кода (в тегах стиля):

  #audio {
text-align: center;
}

Нижняя часть кода:

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 4 — выровнять текст по центру

Верх кода (в тегах стиля):

  #audio {
vertical-align: center;
}

Нижняя часть кода:

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 5 — выровнять содержание по центру

Верх кода (в тегах стиля):

#audio {
justify-content: center;
}

Нижняя часть кода:

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 6 — выровнять себя по центру

Верх кода (в тегах стиля):

#audio {
align-self: center;
}

Нижняя часть кода:

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 7 — отобразить аудиоплеер как встроенный блок

Верх кода (в тегах стиля):

  #audio {
align-self: center;
display: inline-block;
}

Нижняя часть кода:

<div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 8 — завернуть аудиоплеер в стол

  <div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Попытка № 9 — добавление класса аудио контейнера и применение его в строке

Верх кода (в тегах стиля):

.audio-container {
display: flex;
justify-content: center;
align-items: center 
}

Нижняя часть кода:

  <div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

То, что я не пытался

Добавление настолько большого количества отступов, что аудиоплеер оказывается в центре/центре страницы

Источники исследования

MDN Большое количество потоков StackOverflow W3C документы

Решение — * ВАЖНО! * Обновлено 13/03/2019

От Sandip Nirmal ответ в этой теме — тоже попытка № 9 после удаления кеша

Верх кода (в тегах стиля):

 .audio-container {
display: flex;
justify-content: center;
align-items: center 
}

Нижняя часть кода:

  <div>
<audio controls>
<source src="etc.mp3" type="audio/mpeg"/>
</audio>
</div>

Центрировать стол с помощью CSS

Старый способ центрировать стол был простым:

...

Однако атрибут «align» устарел в пользу CSS (каскадных таблиц стилей), и это хорошо. Однако не так очевидно, как центрировать таблицу с помощью CSS.

Может показаться очевидным способ использования CSS «text-align: center;» где-то, может быть, как одно из этих:

  <таблица>

ИЛИ ЖЕ

  
    <таблица>
      ...

ИЛИ, если ты действительно отчаялся,

  
    <таблица>
      ...

Ничего из этого не сработает. Сама таблица будет выровнена по левому краю, но все содержимое ячеек таблицы будет по центру.

Почему? Поскольку «выравнивание текста» применяется к встроенному контенту, а не к элементу уровня блока, например, «таблица».

Способ 1

Чтобы центрировать таблицу, вам нужно установить поля, например:

  table.center {
    маржа слева: авто;
    маржа-право: авто;
  }

А потом сделайте так:

  <таблица>
    ...

На этом этапе Mozilla и Opera займут ваше место. Однако Internet Explorer 5.5 и выше требует, чтобы вы также добавили это в свой CSS:

  тело {выравнивание текста: центр;}

Способ 2

Если вы хотите, чтобы ваша таблица имела определенную процентную ширину, вы можете сделать это:

  table # table1 {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }

А затем в своем HTML / XHTML вы должны сделать это:

  <таблица>
    ...

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

  table.center {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }

И это в вашем HTML:

  <таблица>
    ...

  <таблица>
    ...

Способ 3

Если вы хотите, чтобы ваша таблица имела фиксированную ширину, определите свой CSS следующим образом:

  div.container {
    ширина: 98%;
    маржа: 1%;
  }
  table # table1 {
    выравнивание текста: центр;
    маржа слева: авто;
    маржа-право: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: слева;}

Установите ширину: 100 пикселей на любую ширину, которая вам нужна.

«text-align: center» предназначен для Internet Explorer, без которого он не будет работать.К сожалению, «text-align: center» центрирует весь текст внутри ячеек таблицы, но мы противодействуем этому, устанавливая «tr» и «td» для выравнивания по левому краю.

Затем в своем HTML вы должны сделать это:

  
    <таблица>
      ...

Еще раз, я использую идентификатор. Если вам нужно одинаково центрировать несколько таблиц, используйте класс вместо идентификатора.

Как использовать CSS для центрирования изображений и других объектов HTML

Что нужно знать

Для центрирования текста используйте следующий код («[/]» обозначает разрыв строки): .центр {[/] выравнивание текста: центр; [/]} .
Выровняйте блоки содержимого по центру с помощью следующего кода («[/]» обозначает разрыв строки): .center {[/] margin: auto; [/] ширина: 80em; [/]} .
Для центрирования изображения («[/]» обозначает разрыв строки): img.center {[/] display: block; [/] маржа слева: авто; [/] правое поле: авто; [/]} .

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

Центрирование текста с помощью CSS

Вам нужно знать только одно свойство стиля для центрирования текста на странице:

.center {
 выравнивание текста: центр; 
}

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

Вот пример применения этого класса в HTML-документе:

Этот текст выровнен по центру.

При центрировании текста с помощью свойства text-align помните, что он будет центрирован внутри содержащего его элемента, а не обязательно по центру самой страницы.

Читаемость всегда имеет ключевое значение, когда речь идет о тексте веб-сайта. Большие блоки текста с выравниванием по центру могут быть трудночитаемыми, поэтому используйте этот стиль с осторожностью. Заголовки и небольшие блоки текста, такие как текст тизера для статьи, обычно легко читаются, когда они расположены по центру; тем не менее, большие блоки текста, такие как целая статья, было бы сложно воспринимать, если бы они были полностью выровнены по центру.

Центрирование блоков содержимого с помощью CSS

Блоки контента создаются с использованием HTML

.center {
 маржа: авто; 
 ширина: 80em; 
}

Это сокращение CSS для свойства margin установит для верхнего и нижнего поля значение 0, а для левого и правого будет использоваться значение «auto». По сути, это занимает любое доступное пространство и равномерно делит его между двумя сторонами окна просмотра, эффективно центрируя элемент на странице.

Здесь это применяется в HTML:

Весь блок центрирован,

, но текст внутри него выровнен по левому краю.

Пока ваш блок имеет определенную ширину, он будет центрироваться внутри содержащего элемента. Текст, содержащийся в этом блоке, не будет центрирован внутри него, а будет выровнен по левому краю. Это связано с тем, что текст по умолчанию выровнен по левому краю в веб-браузерах. Если вы хотите, чтобы текст также был центрирован, вы можете использовать свойство text-align, описанное ранее, в сочетании с этим методом, чтобы центрировать разделение.

Центрирование изображений с помощью CSS

Хотя большинство браузеров будут отображать изображения по центру с использованием того же свойства text-align, консорциум W3C это не рекомендует. Следовательно, всегда есть шанс, что будущие версии браузеров проигнорируют этот метод.

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

img.центральный {
 дисплей: блок; 
 крайнее левое: авто; 
 поле справа: авто; 
}

class = «ql-syntax»>

А вот HTML-код изображения, которое нужно центрировать:

class = «ql-syntax»>

Вы также можете центрировать объекты с помощью встроенного CSS (см. Ниже), но этот подход не рекомендуется, поскольку он добавляет визуальные стили в вашу разметку HTML. Помните, что стиль и структура должны быть отдельными; добавление стилей CSS в HTML нарушит это разделение, и поэтому вам следует по возможности избегать его.

class = «ql-syntax ql-align-center»>

Центрирование элементов по вертикали с помощью CSS

Центрирование объектов по вертикали всегда было сложной задачей в веб-дизайне, но выпуск модуля CSS гибкого макета блока в CSS3 предоставляет способ сделать это.

Вертикальное выравнивание работает аналогично горизонтальному выравниванию, описанному выше. Свойство CSS имеет вертикальное выравнивание, например:

.vcenter {
 выравнивание по вертикали: по центру; 
}

Все современные браузеры поддерживают этот стиль CSS.Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст в контейнере по вертикали. Для этого поместите элементы внутри содержащего элемента, такого как div, и установите для него минимальную высоту. Объявите содержащий элемент как ячейку таблицы и установите вертикальное выравнивание на «середину».

Например, вот CSS:

.vcenter {
 min-height: 12em; 
 дисплей: таблица-ячейка; 
 выравнивание по вертикали: по центру; 
}

А вот HTML:

Этот текст расположен по центру поля по вертикали.

Не используйте элемент HTML для центрирования изображений и текста; он устарел, и современные веб-браузеры больше не поддерживают его. Это по большей части является ответом на четкое разделение структуры и стиля в HTML5: HTML создает структуру, а CSS диктует стиль. Поскольку центрирование — это визуальная характеристика элемента (то, как он выглядит, а не то, что он есть), этот стиль обрабатывается с помощью CSS, а не HTML. Вместо этого используйте CSS, чтобы ваши страницы отображались правильно и соответствовали современным стандартам.

Вертикальное центрирование и предыдущие версии Internet Explorer

Вы можете принудительно центрировать Internet Explorer (IE), а затем использовать условные комментарии, чтобы только IE видел стили, но они были немного подробными и непривлекательными.Однако решение Microsoft от 2015 года отказаться от поддержки старых версий IE сделает это не проблемой, поскольку IE выйдет из употребления.

Как центрировать таблицу с помощью CSS (Краткое руководство)

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

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

…

Однако выравнивание таблиц таким образом больше некорректно и устарело в HTML5. Это потому, что современные веб-стандарты диктуют разделение структуры (HTML) и стиля (CSS), а описанный выше метод нарушает этот принцип.

HTML никогда не следует использовать для настройки способа отображения элемента; это теперь работа CSS.Итак, как правильно центрировать таблицу в CSS? В этой статье нашей команды из wpDataTables мы ответим на этот вопрос и покажем вам несколько советов о том, как правильно выровнять таблицы.

Мы кое-что знаем о таблицах, учитывая, что мы создали замечательный плагин для таблиц WordPress, так что давайте углубимся.

Как я могу использовать CSS для центрирования таблицы?

CSS устанавливает внешний вид страницы, позволяя вам контролировать внешний вид и расположение каждого элемента, включая элемент таблицы и все его подэлементы, такие как th, tr и td.

Перво-наперво, давайте рассмотрим «правильный» способ центрирования таблицы с помощью CSS. Если ваши правое и левое поля имеют одинаковую ценность, современные браузеры должны отображать таблицу по центру. Самый простой способ добиться этого — установить для обоих полей значение auto.

Пример того, как написать это в CSS, ниже:

  стол 

  {

  поле справа: авто; 

  левое поле: авто; 

 }

Обратите внимание, что вы не можете просто центрировать таблицу так, как если бы вы это делали с текстом -.например с помощью «text-align: center». Это потому, что элемент таблицы является элементом уровня блока, а не встроенным элементом. «Text-align: center» будет центрировать только встроенный контент, такой как текст в таблице, а не саму таблицу.

Однако в более старых версиях Internet Explorer есть ошибка, при которой элементы уровня блока обрабатываются как встроенные элементы. Таким образом, единственный способ центрировать таблицу для работы с некоторыми версиями IE — явно установить «text-align: center» для родительского элемента таблицы (например, «text-align: center»).грамм. элемент body, как показано ниже):

  кузов {

  выравнивание текста: по центру; 

 }

Вы можете проверить, как разные браузеры будут вести себя с разными стилями, используя «margin-left: auto; margin-right: auto »или« text-align: center ».

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

Примеры будут иметь следующий общий формат:

 

<таблица>

Стили применяются к

,
, а иногда и к обоим.
Раздел таблицы стилей, с которым мы поиграем, чтобы установить поля:
.центр1 { поле справа: авто; левое поле: авто; } .center2 { выравнивание текста: по центру; }
Этот пример будет хорошо работать в новых браузерах. Он также будет работать в большинстве старых браузеров. После того, как вы воспользуетесь этим методом, откройте его в разных браузерах, чтобы проверить, как он выглядит.
CSS для старых браузеров и новых браузеров вместе:
.centertbl { выравнивание текста: по центру; } .centertbl стол { левое поле: авто; поле справа: авто; выравнивание текста: слева; }
Как это работает? Первая часть помещается в
, содержащий
. Это будет центрировать таблицу в Internet Explorer 5 и Netscape 4.Вторая часть применяется к
внутри
.
Настройки полей позволят вам центрировать таблицу в браузерах, которые хорошо работают с CSS. Затем встроенный текст будет возвращен с выравниванием по левому краю по умолчанию, переопределив исходное «выравнивание текста: центр» для поддержки более старых версий браузера.
Как центрировать с запасом
Один из наиболее распространенных способов центрирования таблицы — установить для нижнего и верхнего полей значение 0, а для левого и правого полей — автоматический режим.
Вот обычно используемый метод:
стол { маржа: 0 авто; }
Или можно так:
стол { левое поле: авто; поле справа: авто; }
Если вам нужна таблица точной ширины, вы можете сделать это, как обычно, и автоматическое поле разделит оставшееся пространство.
стол { ширина: 500 пикселей; маржа: 0 авто; }
Другой способ сделать это — использовать проценты для определения ширины:
стол { ширина: 50%; маржа: 0 авто; / * то же, что и маржа: 0 25%; * / }
Выравнивание ячеек: выравнивание текста vs.вертикальное выравнивание
Если вы хотите знать, как центрировать текст в CSS, есть две части для выравнивания текста в ячейке; по горизонтали и вертикали. По горизонтали определяет, будет ли текст выравниваться по центру, по левому или правому краю ячейки. Это контролируется свойством text-align.
По вертикали — это середина, верх или низ ячейки. Это контролируется свойством vertical-align.
Вы применяете указанные ниже свойства к элементу TH или TD, чтобы ваш текст был выровнен по вертикали и горизонтали по вашему желанию.Например:
td { выравнивание текста: центр; вертикальное выравнивание: сверху; }
Выравнивание текста по ширине означает добавление пробелов между всеми словами до тех пор, пока они не будут полностью соответствовать доступному пространству в строке. Последняя строчка не оправдывает.
Советы по оформлению стола
Прежде чем закончить, мы подумали, что может быть полезно иметь список быстрых советов для вашей справки. Это поможет, когда вы создадите таблицу на CSS.
Выровняйте текст
,
и
. Это также дает вам больше частей, где вы можете применить CSS. Это упрощает наложение нескольких стилей.
Использование table-layout позволяет вам более легко устанавливать ширину столбцов. При установке ширины заголовка ширина столбца будет такой же.
Используйте чередование цветов, чтобы упростить чтение таблицы. При быстром сканировании вы можете увидеть, какая информация находится в той же строке.
Сделайте свой стол простым. Вы можете использовать проценты, поэтому вам не нужно каждый раз менять размер.
Вы можете использовать border-collapse, чтобы сделать стол более чистым и аккуратным.
Завершение мыслей о том, как центрировать стол
Теперь вы знаете, как центрировать таблицу с помощью CSS. Как уже говорилось, «правильный» способ сделать это — установить для правого и левого полей значение auto. Этот метод работает почти во всех новых браузерах, которые хорошо работают с CSS.
Для некоторых менее современных браузеров это не сработает.В этом случае вы можете стилизовать таблицу с помощью метода выравнивания текста и окружить ее
. Если вы хотите центрировать таблицу с помощью text-align по внешнему
, вы можете сделать это с помощью text-align.
Вы также можете стилизовать ячейки таблицы со значением выравнивания текста или выравнивания по вертикали всякий раз, когда вы хотите расположить встроенный текст определенным образом.
Если вам понравилось читать эту статью о том, как центрировать таблицу с помощью CSS, вы должны проверить эту статью о таблицах Bootstrap.
Мы также писали о нескольких связанных предметах, таких как цвет фона таблицы, таблицы HTML, адаптивные таблицы с CSS, таблицы CSS и плагины таблиц jQuery.
Center CSS With Style — A How to
Научитесь центрировать CSS. Мы все разочаровались в центрировании вещей в CSS, вот как это сделать правильно
Давайте будем честными. В нашей карьере программиста мы все разочаровались в центрировании вещей в CSS и обнаружили, что ищем способы центрировать div внутри div в Google или Stack Overflow.
Это должна быть одна из самых простых задач, но она может сбивать с толку, когда вы добавляете на страницу больше элементов и стилей.
Поскольку это обычная проблема, я составил список способов центрирования в CSS. Я также включил вставки / ссылки в каждый пример, созданный в CodePen. Не стесняйтесь создавать, делиться или копировать по своему желанию!
Посмотреть мой CodePens можно здесь .
Без лишних слов, давайте перейдем к делу!
Центрирование с помощью методов Text-Align, Margin Auto и Absolute Positioning
Метод «text-align: center», пожалуй, самый распространенный метод центрирования.Он используется в основном для центрирования текста на вашей HTML-странице, но его также можно использовать для центрирования div.
Уловка здесь заключается в следующем:
заключить div, который вы хотите центрировать, с родительским элементом (обычно известным как оболочка или контейнер)
установить text-align: center в родительский элемент
, затем установите внутренний div на display: inline-block
В моем примере с синим квадратом я заключил его с другим div с именем blue-square-container .Чтобы центрировать синий квадрат, мне пришлось создать родительский элемент и установить для свойства display моего синего квадрата значение inline-block.
Это связано с тем, что по умолчанию свойство display блока div установлено на block, что означает, что он будет охватывать всю ширину страницы. Установив для свойства display моего синего квадрата значение inline-block, мы гарантируем, что синий квадрат будет охватывать только заданную мной ширину, которая составляет 100 пикселей.
Добавление нескольких дочерних элементов в родительский элемент (синие квадраты в этом примере) центрирует их все.
Другой распространенный способ центрирования — использование автоматического метода полей. Используя этот метод, нам не нужен родительский элемент.
Мы можем просто применить margin: 0 auto к нашему желтому прямоугольнику, если у нас есть определенная ширина.
margin: 0 auto — это сокращение для установки верхнего и нижнего полей на ноль, а левого и правого полей на auto.
Это важно, потому что без ширины 100 пикселей, которую я определил, браузер не сможет отобразить левое и правое поля, необходимые для центрирования желтого поля.Установив ширину, браузер автоматически распределяет нужную величину поля по обе стороны от желтого поля.
В части «0» можно установить любое количество пикселей для верхнего и нижнего полей.
Еще один интересный трюк — просто установить для margin-left значение auto или margin-right на auto, что позволяет нам перемещать наш div в правую или левую сторону страницы соответственно — попробуйте!
Абсолютное позиционирование элемента позволяет нам размещать элемент в любом месте страницы… с одним недостатком.
Абсолютное позиционирование удаляет элемент из потока страницы.
Почему это важно?
Что ж, это важно, потому что это может привести к наложению элементов при неправильном использовании.
Если мы хотим просто центрировать элемент по горизонтали на странице, как мы это делали в первых двух методах, нам нужно запомнить три шага:
Установите для свойства position абсолютное значение
Применить «Left: 50%» к элементу
Установите левое поле на половину ширины элемента
В этом примере мы используем зеленый квадрат (какой красивый зеленый!) Он того же размера, что и другие примеры, так что наша ширина по-прежнему 100 пикселей.
Как видите, я дал «position: absolute» и применил «left: 50%» к нашему зеленому квадрату. Это указывает браузеру переместить левый край на 50% вправо.
Но если вы воссоздаете этот пример, мы не хотим, чтобы левый край находился посередине, мы хотим, чтобы середина квадрата совпадала с серединой страницы.
Это подводит нас к нашему последнему шагу. Чтобы выровнять элементы и компенсировать лишнее пространство, мы применяем левое поле равным половине ширины зеленого квадрата.В нашем случае это 50 пикселей (независимо от ширины элемента, всегда будет половина).
Центрирование с помощью Transform / Translate
До сих пор мы имели дело только с центрированием объектов по горизонтали, но что, если мы хотим поместить что-то прямо посередине страницы?
Давайте центрируем наш красный квадрат по горизонтали и вертикали.
Хотя этот метод также использует абсолютное позиционирование и «влево: 50%», я также применил к элементу еще два свойства.
Устанавливая для свойства top значение 50%, я приказываю браузеру выровнять верхний край нашего красного квадрата с серединой страницы по вертикали.Но, как и в предыдущем примере, мы не хотим, чтобы края совпадали с центром, мы хотим, чтобы центр нашего квадрата располагался прямо над центром нашей страницы.
Здесь мы применяем новое свойство, называемое преобразованием.
Есть много интересных вещей, которые вы можете делать с преобразованием, например, переводить, вращать и масштабировать анимацию, но для этого примера мы будем использовать translate.
Мы даем свойство преобразования «transform: translate (-50%, -50%)» и вуаля — наш красный квадрат центрируется как по горизонтали, так и по вертикали!
Мне нравится этот метод, потому что независимо от ширины или высоты нашего элемента он всегда будет в центре страницы.
Этот метод часто используется в адаптивном дизайне и не требует определения полей, как в методе абсолютного позиционирования.
Центрирование с помощью Flexbox
Если вы не знакомы с Flexbox, ничего страшного! Flexbox — это модуль макета, который обеспечивает более эффективный способ выравнивания и размещения элементов на странице.
Если вы заинтересованы в изучении Flexbox (настоятельно рекомендую) , Flexbox Froggy — отличный и интересный способ обучения (конечно, не аффилированный — это именно то, что я использовал для изучения Flexbox!)
Четыре шага для центрирования по горизонтали и вертикали с помощью Flexbox:
HTML, тело и родительский контейнер должны иметь высоту 100%
Установить гибкость отображения на родительском контейнере
Установить элементы выравнивания по центру на родительском контейнере
Установить justify-content для центрирования на родительском контейнере
Установка гибкости отображения на родительском контейнере определяет его как гибкий контейнер.
Устанавливая align-items в center, мы говорим, что дочерние или гибкие элементы должны быть центрированы по вертикали внутри родительского элемента.
Justify-content работает таким же образом, но для нашего примера в горизонтальном направлении.
Мне также нравится использовать этот метод, потому что, опять же, и отзывчивый , и не требует никаких расчетов маржи .
Надеюсь, вы нашли этот пост информативным и полезным. Буду рад услышать ваши отзывы!
Спасибо за чтение! 🙂
Центр a с переменной шириной — Справка Uberflip
Узнайте, как центрировать контейнеры, такие как div, при переменной ширине.
Принято считать, что если вы хотите центрировать контейнер, такой как div, лучше всего определить ширину и установить для полей слева и справа значение «auto». Например:
ваш центрированный контейнер шириной 200 пикселей
Это нормально, если у вас определенная ширина, но что произойдет, если ширина изменится на ?
Есть отличный пример рядом с домом — внутри концентратора набор плавающих плиток Предметов содержится в div и должен быть центрирован на странице, например, на широком экране, который может поместиться на нем, 6 плиток отображать в одной строке.
Поскольку мы хотим, чтобы в строке отображалось не более 6 плиток, и каждая плитка имела ширину 250 пикселей, и каждая плитка должна находиться на расстоянии 20 пикселей от своего соседа, ширина контейнера устанавливается равной (250 + 20) * 6 = 1620 пикселей.
Вы найдете это в нашем CSS, который определяет оболочку (.page-aligner), в которой находится контейнер тайлов:
@media only screen и (max-width: 9999px) { .page-aligner { width: 1620px; } }
Хотя это работает, это довольно ограничивает.Если, например, в концентраторе есть только 4 элемента, эти 4 плитки будут смещены по центру, потому что размер контейнера по-прежнему будет 1620 пикселей, а последние 2 места для плиток будут незаполненными.
Есть способ получше . И когда я говорю лучше, я имею в виду разных .
Вместо того, чтобы указывать ширину контейнера, мы могли бы сделать что-то вроде этого:
ваша переменная ширина, центрируемый контейнер
Установив в контейнере отображение inline-block (что безопасно для кроссбраузерности), его можно выровнять в соответствии со свойством text-align.Вы заметите, что я установил выравнивание текста контейнера # на « слева, », чтобы вернуть его по умолчанию.
В этом примере, вместо того, чтобы устанавливать ширину обертки, мы могли бы вместо этого установить max-width . В этом случае это заставит седьмую плитку обернуться.
Это также будет означать отсутствие необходимости определять какие-либо точки останова для небольших экранов, поскольку теперь ширина экрана будет определять меньшую ширину для этой оболочки.
Как центрировать что угодно с помощью CSS
Недавно мы погрузились в самые основные концепции макета CSS и исследовали различия между абсолютным и относительным позиционированием.Мы собираемся продолжить это с другим докладом о макете CSS, на этот раз основанном на фундаментальном вопросе, который задает почти каждый новый разработчик: как вы центрируете что-то?
Существует множество различных типов веб-элементов и ситуаций макета, каждая из которых требует уникального решения для центрирования (как по вертикали, так и по горизонтали). Сегодня мы рассмотрим несколько этих сценариев, чтобы вы могли понять, как они работают, и уйти с уверенностью, чтобы сосредоточить что угодно!
Для кого это?
В последнее время я получил много отзывов от дизайнеров, которые испытывают трудности с базовыми методами и концепциями верстки в CSS.По общему мнению, многие новички в CSS просто «возятся» с кодом, пока все, наконец, не заработает.
Побывав там несколько раз, я знаю, что это чрезвычайно тяжелый период вашего профессионального роста. Знание того, что ответ находится прямо перед вами, и неспособность понять его мучительно и отнимает много времени.
Если это звучит знакомо, надеюсь, я смогу помочь вам выйти из этого периода с помощью некоторых надежных и практических советов о том, как справиться с некоторыми распространенными сценариями макета.Если вы CSS-ниндзя, умеющий кодировать веб-сайт с завязанными глазами, эта статья, вероятно, не для вас. Если вы дизайнер, который просто хочет лучше понять, как взять то, что есть в вашем файле Photoshop, и превратить его в CSS, вы попали в нужное место. Давайте начнем.
Центрировать элемент по горизонтали
Первый сценарий, который мы атакуем, на сегодняшний день является одним из наиболее распространенных: центрирование элемента по горизонтали в области просмотра или в окне браузера. Для начала давайте выделим простой div и придадим ему базовый стиль.
Как видите, по умолчанию наш div появляется в верхнем левом углу окна просмотра. Уловка здесь в том, что нам нужно, чтобы div оставался в центре окна, независимо от того, какой размер окна сейчас. Это означает, что мы не можем использовать абсолютное позиционирование, чтобы разместить его в определенной точке, потому что оно не будет центрировано на любых других возможных размерах окна.
Вместо этого нам нужно использовать значение «авто», которое можно применить к полям. Вот как это работает:
Как видите, применение единственной строки CSS перебросило наш блок прямо в центр его родителя, которым в данном случае является тело.Для этого я использовал сокращение CSS. Если вам нужно что-то напомнить, сокращение полей начинается сверху и движется по часовой стрелке.
Вы можете сократить его еще больше, если вам нужно назначить только два значения. В этом случае первый слот будет применяться к верхнему и нижнему полям, а второй слот будет применяться к левому и правому полям. Вот еще один взгляд на наш центрированный div, на этот раз с полями, объявленными с использованием трех отдельных, но совершенно эквивалентных методов.
Как видите, в нашем элементе отсутствуют верхнее и нижнее поля, но для левого и правого поля установлено значение auto , что обеспечивает идеальное центрирование элемента.
Что нужно помнить
При использовании трюка с автоматическими полями следует помнить несколько важных вещей. Прежде всего, у должна быть определенная ширина, объявленная для элемента, который вы центрируете. Объявление высоты не обязательно, вы можете разрешить содержимому определять высоту, если хотите, что является настройкой по умолчанию, но всегда должна быть установлена ширина.
Важно отметить, что хотя этот трюк будет работать с большинством элементов уровня блока, а не только с div, он не поможет вам с вертикальным центрированием. В качестве примера давайте поместим абзац в div, а затем попытаемся центрировать этот абзац в пространстве.
и
с помощью text-align.Это сделает его более аккуратным и легким для чтения.
Чтобы разбить вашу таблицу на части, которые имеют смысл, вы можете использовать
div {
height: 400 пикселей;
ширина: 400 пикселей;
фон: #eee;
маржа: авто;
}
p {
ширина: 60%;
маржа: авто;
шрифт: 14 пикселей / 1.5 Helvetica, без засечек;
}
Как видите, у меня установлены автоматические поля как для абзаца, так и для его родительского div. Это расположило все по центру по горизонтали, но не повлияло на вертикальное положение.
Центрировать абсолютно позиционированный элемент
Вышеупомянутый метод позволяет автоматически центрировать один элемент внутри другого, но в этом методе предполагается, что вы используете контекст позиционирования по умолчанию: статический. Если у вас применено абсолютное позиционирование, этот метод не работает.
Используя методы абсолютного и относительного позиционирования, которые мы изучили на прошлой неделе, мы можем применить простую формулу для решения этой проблемы.
Здесь мы видим, что для абсолютно позиционированного элемента, содержащегося внутри относительно позиционированного элемента, нам нужно установить свойство left , подставив некоторые числа в эту формулу. Вот тестовый пример:
. Контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
фон: #eee;
маржа: 10 пикселей автоматически;
позиция: относительная;
}
.коробка {
высота: 100 пикселей;
ширина: 100 пикселей;
фон: # 222;
позиция: абсолютная;
}
Давайте посмотрим, сможем ли мы центрировать черный ящик по горизонтали. Используя нашу формулу, мы видим, что для свойства left необходимо установить значение 100 пикселей.
. Контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
фон: #eee;
маржа: 10 пикселей автоматически;
позиция: относительная;
}
.коробка {
высота: 100 пикселей;
ширина: 100 пикселей;
фон: # 222;
позиция: абсолютная;
слева: 100 пикселей;
}
С помощью этого кода мы установили расстояние между левой стороной поля и краем его родительского контейнера на 100 пикселей, что идеально центрирует его.
с шириной текучей среды
Приведенный выше метод работает только в том случае, если родительский контейнер имеет статическую ширину. Однако, учитывая популярность адаптивного дизайна, в последнее время все больше и больше контейнеров переходят по гибкому пути.Это означает, что нам понадобится другой способ центрирования дочернего элемента, который не зависит от ширины родительского элемента.
Для этого нам нужно использовать процентное значение для оставшегося значения . Очевидный ответ — использовать 50%, но на самом деле это не сработает, потому что вы не учитываете ширину центрируемого элемента. Чтобы это работало, нам нужно добавить отрицательное левое поле, равное половине ширины дочернего элемента.
Используя эту логику, мы применяем левое поле в пятьдесят отрицательных пикселей вместе с левым значением 50%, и наш div снова идеально центрируется по оси x.
1
2
3
4
5
6
7
8
9
10
11
12
13
140002
18
. Контейнер {
высота: 300 пикселей;
ширина: 70%;
фон: #eee;
маржа: 10 пикселей автоматически;
позиция: относительная;
}
.коробка {
высота: 100 пикселей;
ширина: 100 пикселей;
фон: # 222;
позиция: абсолютная;
/ * Метод центрирования 2 * /
margin: 0px 0 0 -50px;
Осталось
: 50%;
}
Важно отметить, что это также работало бы, если бы наш дочерний элемент имел плавную ширину. Мы используем те же шаги, что и раньше, и получаем что-то вроде следующего:
1
2
3
4
5
6
7
8
9
10
11
12
13
140002
18
.контейнер {
высота: 300 пикселей;
ширина: 70%;
фон: #eee;
маржа: 10 пикселей автоматически;
позиция: относительная;
}
.box {
height: 100px;
ширина: 70%;
фон: # 222;
позиция: абсолютная;
/ * Метод центрирования 2 * /
маржа: 0px 0 0 -35%; / * Половина 70% / *
Осталось
: 50%;
}
Мертвая точка элемента
Теперь, когда у нас есть несколько простых и сложных методов центрирования в нашем поясе инструментов, пришло время решить загадку идеального центрирования элемента как по горизонтали, так и по вертикали.
К счастью, для этого мы можем использовать тот же метод, который мы только что изучили, нам просто нужно учитывать высоту. На этот раз мы также собираемся центрировать родительский и дочерний объекты по вертикали и горизонтали. Вот код для этого:
1
2
3
4
5
6
7
8
9
10
11
12
13
140002
14
18
19
20
21
22
.контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
фон: #eee;
позиция: абсолютная;
поля: -150 пикселей 0 0 -150 пикселей;
Осталось
: 50%;
верх: 50%;
}
.box {
height: 100px;
ширина: 100 пикселей;
фон: # 222;
позиция: абсолютная;
/ * Метод центрирования 2 * /
поля: -50px 0 0 -50px;
Осталось
: 50%;
верх: 50%;
}
Здесь нужно отметить несколько вещей.Во-первых, на этот раз и родитель и потомок абсолютно позиционированы. Отсюда я использовал наш трюк с отрицательными полями со свойством left в контейнере div, а затем проделал то же самое с блоком div.
В результате наш контент полностью центрирован и останется таким, пока браузер изменяет размер в любом направлении (даже по вертикали!). Нажмите на изображение ниже, чтобы поработать с живой демонстрацией.
Центрирующий текст
В качестве следующего трюка я научу вас кое-чему интересному о центрировании текста.Начнем с простого элемента h2 внутри контейнера div.
Теперь я уверен, что вы уже знаете, как центрировать этот текст по горизонтали в пространстве. Обычно это одна из первых вещей, которую вы изучаете в CSS. Просто установите для свойства text-align значение center.
. Контейнер {
высота: 400 пикселей;
ширина: 400 пикселей;
фон: #eee;
маржа: 50 пикселей автоматически;
}
h2 {
шрифт: 40 пикселей / 1 Helvetica, без засечек;
выравнивание текста: по центру;
}
Легко, правда? Но теперь предположим, что мы хотим также центрировать эту строку текста по вертикали.Если бы это был абзац, мы, вероятно, приняли бы во внимание описанные выше методы, но поскольку это всего лишь одна строка, мы можем использовать изящный трюк.
Все, что нам нужно сделать, это установить для свойства line-height высоту контейнера. Я сделал это ниже, используя сокращенный синтаксис шрифта.
. Контейнер {
высота: 200 пикселей; / * Устанавливаем это значение для line-height * /
width: 400px;
фон: #eee;
маржа: 150 пикселей автоматически;
}
h2 {
шрифт: 40px / 200px Helvetica, без засечек;
выравнивание текста: по центру;
}
Предупреждение: Этот трюк работает только с одной строкой текста и немного хакерский, поэтому он может не подходить для всех ситуаций.
Центрирование фонового изображения
Последнее, чему мы научимся центрировать, — это фоновое изображение CSS. Для начала мы создадим еще один контейнерный div, но на этот раз оставим его пустым и добавим изображение с помощью CSS.
. Контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
маржа: 150 пикселей автоматически;
фон: #eee url (http://lorempixum.com/100/100/nature/4) no-repeat;
}
Как видите, по умолчанию изображение появляется в левом верхнем углу, если не задан повтор.Однако оказывается, что вы можете переместить его в один из девяти различных заранее назначенных слотов. Они показаны ниже:
Мы выполняем это перемещение с помощью свойства background-position . Просто вызовите это свойство и установите любое из значений, перечисленных выше.
. Контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
маржа: 150 пикселей автоматически;
фон: #eee url (http: // lorempixum.com / 100/100 / nature / 4) без повтора;
background-position: вверх по центру;
}
В качестве альтернативы мы можем использовать для этого сокращенный синтаксис. Просто добавьте одно из значений в конец потока значений в фоновое свойство .
. Контейнер {
высота: 300 пикселей;
ширина: 300 пикселей;
маржа: 150 пикселей автоматически;
фон: #eee url (http: // lorempixum.com / 100/100 / nature / 4) центр без повторов;
}
Заключение
Вот и все! Теперь вы должны быть полностью уверены в своей способности справиться практически с любой ситуацией центрирования с помощью CSS, от точного центрирования div до вертикального центрирования строки текста внутри его контейнера и за его пределами.
AtoZ CSS Быстрый совет: как центрировать текст и значки по вертикали
Эта статья является частью нашей серии статей AtoZ CSS. Вы можете найти другие записи из этой серии здесь.
Полную стенограмму и скринкаст для vertical-align можно посмотреть здесь.
Добро пожаловать в нашу серию AtoZ CSS! В этой серии статей я буду исследовать разные значения (и свойства) CSS, каждое из которых начинается с отдельной буквы алфавита. Мы знаем, что иногда скринкастов бывает недостаточно, поэтому в эту статью мы добавили быстрые советы о том, как центрировать текст и значки по вертикали.
V для вертикального центрирования текста и значков
В исходном ролике для свойства vertical-align мы рассмотрели несколько методов центрирования элементов по вертикали.В этой статье мы опишем три различных метода вертикального центрирования — то, что всегда было довольно сложно, но теперь сделать проще простого.
Используйте
line-height для простого вертикального центрирования
Чтобы вертикально центрировать одну строку текста или значок внутри контейнера, мы можем использовать свойство line-height . Это свойство управляет высотой строки в серии текста и добавляет равное количество пространства над и под строковым блоком встроенных элементов.Если известна высота контейнера , то установка line-height того же значения приведет к вертикальному центру дочерних элементов.
.container { ширина: 200 пикселей; высота: 200 пикселей; высота строки: 200 пикселей; }
Используйте положение
и преобразование для гибкого вертикального центрирования
Метод line-height , описанный выше, быстрый и грязный, но основан на фиксированной высоте. Я стараюсь избегать явной установки высоты , поскольку это часто может ограничивать поток контента в адаптивном проекте.Этот метод недостаточно гибкий, если вы работаете с элементами переменной или плавной высоты .
Вместо этого мы можем объединить позицию и переводы в вертикально центрируемые элементы с переменной высотой . Например, чтобы вертикально центрировать элемент в пределах всей высоты области просмотра, мы могли бы использовать следующий фрагмент:
.container { положение: относительное; мин-высота: 100vh; } .vertical-center { позиция: абсолютная; верх: 50%; осталось: 50%; преобразовать: перевести (-50%, - 50%); }
Сначала мы создаем контекст позиционирования, устанавливая position: relative для элемента контейнера.Это позволит нам расположить элемент .vertical-center внутри его границ.
Затем мы помещаем верхний верхний левый угол элемента, который будет центрирован точно в центре контейнера, располагая его верхний край на 50% от верха его родителя и на 50% от покинули своих родителей.
Наконец, элемент перемещается обратно в центр, перемещая его вверх на 50% от его высоты и влево на 50% от его ширины .Теперь наш элемент расположен по центру контейнера по вертикали и горизонтали. Поскольку размещение выполняется с процентными значениями, относящимися к размеру элемента, при изменении ширины или высоты контейнера или дочернего элемента элемент останется по центру.
Используйте flexbox для вертикального центрирования
Приведенный выше метод отлично подходит для центрирования элементов с использованием традиционной прямоугольной модели и методов позиционирования. Он будет работать в IE9 +, но если вам нужно поддерживать только современные браузеры или IE10 +, вы можете добиться того же результата с гораздо меньшим количеством кода, используя flexbox.
Flexbox — это совершенно другой способ мышления о макете, но одна из его сильных сторон — это то, как он может выравнивать элементы в горизонтальном и вертикальном пространстве.
Чтобы центрировать элемент с помощью flexbox, мы можем использовать следующий фрагмент:

.