CSS: выравнивание по центру

Центрирование

Общая функция CSS — центрирование текста или изображения. Фактически существует три типа центрирования:

• Центрирование текста
• Центрирование текстового блока или изображения
• Центрирование текстового блока или изображений по вертикали

В последних реализациях CSS вы также можете использовать функции уровня 3 (CSS3), которые позволяют выравнивать абсолютно позиционированные элементы по центру:

• Выравнивание по вертикали на уровне 3
• Выравнивание по вертикали и горизонтали на уровне 3
• Прокачка зоны обзора на уровне 3

Центрирование строк текста

Самый распространенный и (следовательно) самый простой вид центрирования — это центрирование строк текста в абзаце или заголовке. Для этого в CSS есть свойство text-align’:

P { выравнивание текста: по центру } H2 { выравнивание текста: по центру }

который отображает каждую строку абзаца P или заголовка H2 в центре между полями, вот так:

Все строки в этом абзаце выравниваются по центру полей абзаца. Это стало возможным благодаря свойству «center» CSS text-align’.

Вертикальное выравнивание

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

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда штриховые/текстовые элементы можно выровнять по центру просто потому, что они имеют одинаковые значения свойств padding-top и padding-bottom.

.link {padding-top: 30px; отступ снизу: 30 пикселей;

}

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

.center-text-trick { высота: 100 пикселей; высота строки: 100 пикселей; пробел: nowrap;

}

Выравнивание многострочного элемента

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

Если это что смотреть на планшете, можно ли вам написать Flexbox? Отдельный элемент Flex можно легко разместить в центре контейнера Flex.

.flex-center-vertically { display: flex; оправдание-содержание: центр; гибкое направление: столбец; высота: 400 пикселей;

}

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

Если оба метода, показанные выше, невозможно применить, вы можете использовать метод «призрачного элемента», при котором псевдоэлемент высотой 100% размещается внутри контейнера и выравнивается вертикально по его центру.

.ghost-center { позиция: относительная; } .ghost-center::before {content: » «; отображение: встроенный блок; высота: 100%; ширина: 1%; вертикальное выравнивание: по середине; } .ghost-center p { display: inline-block; вертикальное выравнивание: по середине;

}

Выравнивание по центру блочного элемента

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

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

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

.parent { позиция: относительная; } .child { позиция: абсолютная; верх: 50%; высота: 100 пикселей; маржа сверху: -50 пикселей; /* учитывать отступы и границы, если не используется размер окна: border-box; */

}

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

Даже если вы не знаете высоту элемента, все равно можно увеличить его до 50% высоты родительского элемента, а затем поднять до 50% его собственной высоты:

.parent { позиция: относительная; } .child { позиция: абсолютная; верх: 50%; трансформировать: транслироватьY(-50%);

}

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, сделать это можно очень просто с помощью Flexbox.

.parent { display: flex; гибкое направление: столбец; оправдание-содержание: центр;

}

Читайте также: ТОП 7 причин, объясняющих почему люди жестокие

Итого

Общие решения, о которых говорилось в этой статье.

Для горизонтального центрирования:

• text-align: center – центрирует инлайн-элементы в блоке.
• margin: 0 auto – центрировать блок внутри родителя. Необходимо указать ширину блока.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента безнет, ​​а родегя – нетРодителю позиция:относительная, потомку позиция:абсолютная; top:50% и маржа-top:-<половина-высоты-потомка>. Аналогично можно отцентрировать и по хирозонтали. Нужны особые удобные высточные (px,em…). Значение line-height:100% не будет работать, т.к процент берется не от высоты блока, а от текущей строки-высоты.

Поставьте line-height роденью во всю его высоту, а потомку поставьте display:inline-block.

Высота обоих элементов неизвестна.

Три варианта:

1. Создайте элемент-родитель таблицы с помощью display:table-cell(IE8) или таблицы таблицы и пассивируйте его по вертикали:middle. Работает отлично, но вместо обычного блока мы имеем дело с таблицей.
2. Решение со сайтом участие внешними:перед и инлайн-блоками. Достаточно уверназненно и не создавать таблетки.
3. Решение с использованием flexbox.

Центрирование блока или изображения

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

P.blocktext { поле слева: авто; поле справа: авто; ширина: 6em…

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

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства поля. Например:

IMG.displayed { дисплей: блок; поле слева: авто; поле справа: авто }…

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

CSS уровня 2 не имеет свойства вертикального центрирования. Вероятно, оно появится в версии CSS level 3 (см ниже). Но даже в CSS2 центрировать блоки по вертикали можно с помощью объединения нескольких свойств. Хитрость в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. Критические эчелки таблеток могут быть выровнены по центру вектриклы.

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

Центрирование по вертикали в CSS уровня 3

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

Например:

Этот абзац выравнивается вертикально по центру.

Для документа, который выглядит следующим образом:

Этот абзац…

таблица стилей выглядит так:

div.container3 { высота: 10em; позиция: относительная } /* 1 */ div.container3 p {margin: 0; позиция: абсолютная; /* 2 */ верх: 50%; /* 3 */ Transform: Translate(0, -50%) } /* 4 */

Основные правила:

1. Сделайте контейнер относительно позиционированным (position:relative), чтобы он превратился в контейнер для абсолютно позиционированных элементов.
2. Сделайте элемент абсолютно позиционированным (позиция: абсолютная).
3. Поместите элемент рядом с контейнером, используя «top: 50%». (Обратите внимание, что «50%» здесь означает 50% высоты контейнера.)
4. Используйте функцию перевода, чтобы переместить элемент на половину его высоты. («50%» в «translate(0, -50%)» указывает высоту элемента.)

В последнее время (примерно с 2015 года) новая технология стала доступна в нескольких реализациях CSS. Он был основан на новом ключевом слове «flex» для свойства «display». Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если структура этого документа правильная.

Этот абзац выравнивается вертикально по центру.

таблица стилей выглядит так:

div.container5 { высота: 10em; дисплей: flex;align-items: center } div.container5 p {margin: 0 }