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

3. Flexbox

Flexbox – это мощный инструмент CSS для создания гибких и отзывчивых макетов. Для выравнивания картинки по центру с помощью Flexbox можно использовать контейнер с заданным свойством justify-content: center. Например:

.container 
display: flex;
 
justify-content: center;
 
>
 
.container img 
width: 200px;
 
height: 200px;
 
>
 

В этом примере картинка будет расположена по центру блока .container.

Использование CSS для выравнивания картинки по центру

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

1. Использование свойства text-align

Свойство text-align может быть использовано для выравнивания картинки по центру на странице. Для этого нужно установить значение “center” для свойства text-align в CSS-классе, к которому относится изображение.

.img-container 
text-align: center;
 
>
 

2. Использование свойства margin

Свойство margin также может быть использовано для выравнивания картинки по центру. Для этого нужно установить значения “auto” для свойств margin-left и margin-right в CSS-классе, к которому относится изображение.

.img-container 
margin-left: auto;
 
margin-right: auto;
 
>
 

3. Использование свойства position

Свойство position может быть использовано для выравнивания картинки по центру с помощью комбинации свойств top, bottom, left и right. Для этого нужно установить значения “50%” для свойств left и top, а также установить значение “translate(-50%, -50%)” для свойства transform в CSS-классе, к которому относится изображение.

.img-container 
position: absolute;
 
left: 50%;
 
top: 50%;
 
transform: translate(-50%, -50%);
 
>
 

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

Выравнивание картинки в HTML-таблице

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

Способ 1: Использование атрибута align

Самым простым и распространенным способом выравнивания картинки в таблице является использование атрибута align. Для этого нужно добавить данный атрибут к тегу следующим образом:

Способ 2: Использование CSS

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

Способ 3: Использование HTML-тегов

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

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

Использование Flexbox для выравнивания картинки по центру

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

Шаг 1. Создание контейнера flex

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

Шаг 2. Выравнивание картинки по центру

После создания контейнера flex, можно приступить к выравниванию картинки по центру. Для этого необходимо дать картинке свойство margin: auto. Это свойство позволяет автоматически распределять свободное пространство по краям картинки, что приводит к ее центрированию по горизонтали и вертикали.

Также можно использовать свойство align-items: center, которое добавляется к контейнеру flex, чтобы выравнять картинку по центру вертикально. Свойство justify-content: center можно добавить для центрирования картинки по центру горизонтально.

Таким образом, с использованием Flexbox можно легко выровнять картинку по центру, как по горизонтали, так и по вертикали. Этот метод является простым и эффективным способом достичь нужного визуального эффекта на веб-странице.

Выравнивание картинки с помощью позиционирования

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

Позиционирование абсолютно

Для выравнивания картинки по центру страницы с помощью позиционирования абсолютно необходимо задать ей абсолютное позиционирование с помощью свойства position: absolute. Затем, чтобы центрировать картинку горизонтально, можно использовать свойство left: 50% и позиционировать ее относительно левого края страницы.

Однако, чтобы картинка оказалась точно по центру страницы, необходимо также использовать свойство transform: translateX(-50%). Это свойство позволяет сдвинуть картинку на половину ее ширины влево, что обеспечивает ее центрирование по горизонтали.

Пример кода

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

.container

position: relative;

>

.image

position: absolute;

left: 50%;

transform: translateX(-50%);

>

В приведенном примере, картинке с классом “image” задано абсолютное позиционирование и она центрируется как по горизонтали, так и по вертикали. Обертка с классом “container” имеет относительное позиционирование, что позволяет картинке быть относительно нее.

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

Выравнивание картинки с помощью text-align

align: Картинка выравнивается по умолчанию по левому краю, но вы также можете использовать свойство CSS “text-align” для выравнивания картинки по центру внутри элемента.

text-align: Свойство CSS “text-align” позволяет управлять выравниванием содержимого элемента по горизонтали. Для выравнивания картинки по центру используйте значение “center”. Например, text-align: center;

Пример: Если у вас есть элемент с классом “container” и вы хотите выравнять картинку внутри этого элемента по центру, вы можете применить следующие стили:

Теперь любая картинка, содержащаяся внутри элемента с классом “container”, будет выравниваться по центру.

Примечание: При использовании “text-align: center” все содержимое элемента будет выравниваться по центру. Если вам нужно выровнять только картинку, а не весь контент элемента, то можете использовать дополнительные методы, такие как позиционирование или использование таблицы.

Используя свойство CSS “text-align” вы можете легко выровнять картинку по центру внутри элемента и создать более привлекательный внешний вид для вашего веб-сайта.

Выравнивание картинки с помощью margin

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

Для начала, нужно задать определенные размеры для картинки, используя свойства width и height. После этого можно приступать к выравниванию с помощью отступов.

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

\img 
width: 200px;
 
height: 200px;
 
margin-left: -100px;
 
margin-right: -100px;
 
>
 

В данном примере, заданы размеры картинки 200px на 200px. Отрицательные значения отступов (margin-left и margin-right) равны половине ширины изображения, тем самым выравнивая его по центру блока или контейнера.

При использовании данного метода нужно учитывать, что элемент, содержащий картинку, должен иметь свойство overflow: hidden, чтобы скрыть излишние части картинки, которые выходят за границы блока или контейнера.

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

Создание контейнера для выравнивания картинки по центру

Шаг 1: Создание контейнера

Для начала необходимо создать контейнер, в котором будет размещена картинка. Для этого добавим в HTML следующий код:

В данном примере мы создали контейнер с классом “container” и добавили тег с указанием пути к изображению и альтернативным текстом.

Шаг 2: Применение стилей к контейнеру

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

.container 
display: flex;
 
justify-content: center;
 
align-items: center;
 
height: 100vh;
 
>
 

В данном примере мы использовали свойства “display: flex;”, “justify-content: center;” и “align-items: center;”, которые позволяют выравнивать элементы по центру по горизонтали и вертикали. Также задали высоту контейнера равную 100% высоты окна браузера (“height: 100vh;”), чтобы картинка была посередине экрана.

Теперь, применив данные стили к контейнеру, картинка будет выровнена по центру страницы.

Использование JavaScript для выравнивания картинки по центру

Существует несколько способов использования JavaScript для выравнивания картинки по центру на веб-странице.

1. Использование стилей JavaScript

Один из способов состоит в добавлении стилей JavaScript, чтобы выровнять картинку по центру. Для этого можно использовать свойство margin, устанавливая его значение для картинки по горизонтали и вертикали на auto. Например:

2. Использование CSS классов

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

Затем, в JavaScript можно добавить класс к картинке, используя метод classList.add(). Например:

Если нужно выровнять картинку только по горизонтали или только по вертикали, можно использовать соответствующее значение margin-left или margin-right, margin-top или margin-bottom.

Применение JavaScript для выравнивания картинки по центру дает большую гибкость и контроль над внешним видом и позиционированием элементов на веб-странице.

Создание отдельного класса для выравнивания картинки по центру

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

Прежде всего, необходимо определить название класса, которое будет использоваться для выравнивания картинок по центру. Например, можно назвать этот класс “center-image”. Для создания класса в HTML используется атрибут “class” с соответствующим значением.

Далее, в CSS файле или внутри тега

Вопрос-ответ:

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

Выровнять картинку по центру можно с помощью CSS свойства text-align: center; либо с помощью flexbox, установив свойство justify-content: center; для контейнера, в котором расположена картинка.

Какое CSS свойство отвечает за выравнивание картинки по центру?

За выравнивание картинки по центру отвечает свойство text-align: center;.

Можно ли выровнять картинку по центру с помощью HTML?

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

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

Другими способами выравнивания картинки по центру являются использование флексбокса с помощью свойства justify-content: center; или позиционирование с помощью свойств position: absolute; и left: 50%; top: 50%; в сочетании с transform: translate(-50%, -50%);.

Можно ли выровнять картинку по центру без использования CSS?

Нет, выровнять картинку по центру без использования CSS невозможно, так как CSS отвечает за стилевое оформление элементов на веб-странице.

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

Для выравнивания картинки по центру можно использовать свойства display: flex; и align-items: center; для ее контейнера.

Можно ли выровнять картинку по центру только по горизонтали?

Да, можно. Для выравнивания картинки по центру только по горизонтали можно использовать свойство text-align: center; или свойство margin: 0 auto;.

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

Да, можно. Для выравнивания картинки по центру только по вертикали можно использовать свойство line-height: высота блока с картинкой; или позиционирование с помощью свойств position: absolute; и top: 50%; в сочетании с transform: translateY(-50%);.

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

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

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

Для выравнивания нескольких картинок по центру можно использовать свойства display: flex; и justify-content: center; для контейнера, в котором расположены картинки.

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

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

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

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

Какое свойство CSS отвечает за ширину картинки?

За ширину картинки отвечает свойство width в CSS.

Какое свойство CSS отвечает за высоту картинки?

За высоту картинки отвечает свойство height в CSS.

Можно ли выравнивать картинку по центру с помощью JavaScript?

Да, можно. С помощью JavaScript можно выравнивать картинку по центру, изменяя ее позиционирование, размеры и отступы.

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

Использование CSS является наиболее оптимальным способом центрирования изображений, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML align стали доступны в CSS , начиная с версии 1.0 . Они отлично работают с CSS3 и современными веб-браузерами:

Применение CSS — выравнивание по центру HTML

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

CSS можно использовать, чтобы:

• Центрировать текст;
• Центрировать блочный элемент ( например, div );
• Центрировать изображение;
• Вертикально центрировать блок или изображение.

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

Советы по центрированию с помощью CSS

HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.

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

Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align :

С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.

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

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

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

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью .

Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto :

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0 , а левый и правый отступы будут использовать значение auto . Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align .

Применение в HTML:

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

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

Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align . Но не стоит полагаться на этот метод, так как он не рекомендован W3C .

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

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

Также можно центрировать объекты с помощью встроенного CSS :

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

HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3 , появилось решение для этой задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle :

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

• Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div ;
• Задайте минимальную высоту элементу-контейнеру;
• Объявите элемент-контейнер;
• Установите для HTML vertical align значение middle .

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

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

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

МЛ Мария Логутенко автор-переводчик статьи « Use CSS to Center Images and Other HTML Objects »

Горизонтально центрированное меню с использованием только CSS

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

Пример центрированного меню

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

На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.

Разметка HTML

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

Код CSS центрированного меню

Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.

Как работает метод центрирования

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

Элемент div без смещения

Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.

Элемент div со смещением влево

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

Стандартное выровненное влево меню

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

Обратите внимание на следующие моменты:

• Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
• Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenudiv и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
• Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
• Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.

Смещаем положение неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative; . Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.

Сдвигаем положение всех элементов меню

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

Несколько важных замечаний

При использовании данного метода центрирования надо помнить о нескольких важных моментах:

• Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div. Таким образом, выступающая часть элемента div будет обрезана.
• Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li.
• Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li, чтобы можно было стилизовать их индивидуально.

Заключение

Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.

Каскадные таблицы стилей CSS советы & приёмы

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

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

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

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

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

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

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

Следующее изображение центрировано:

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

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

Этот маленький абзац центрирован вертикально.

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

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

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

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

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

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

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

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

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

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy