Выравнивание div по центру css. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы
Посетителю должно быть легко найти нужную информацию на странице. Для этого, а также для выражения некоторой экспрессии используются различные теги HTML. В данной статье будет рассмотрены нюансы работы с таблицами, в частности - их выравнивание.
Основные тонкости
В первую очередь следует заметить, что эта графическая форма представления данных позволяет структурировать информацию, что значительно облегчает ее усвоение. Внутри ячеек таблицы может находиться практически любой контент: от текста до видеоролика. При этом важно учесть не только размер, но и его расположение.
Как сделать саму таблицу по центру
Чаще всего нужно оформить таблицу по центру страницы, хотя изначально она прижата к левой стороне страницы. Для того чтобы выровнять её по центру, нужно задать ей свойство margin со значением auto.
Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.
Выравнивание по центру в ячейках
Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег
Текст по центру ячейки |
Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега
:
С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.
Веб-дизайнеры ежедневно используют DIV в работе. Без преуменьшений, это самый популярный тег. Откройте источник любого сайта, и вы увидите, что большая часть, если не две трети объектов заключены в
Что такое DIV
Название элемента происходит от английского слова division, что в переводе означает деление. При написании разметки его используют для того, чтобы разбить элементы на блоки. В DIV заключают группы контента на веб-странице. Например, изображения, абзацы с текстом. Тег никак не влияет на отображение содержимого и не несет никакой семантической нагрузки.
DIV поддерживает все глобальные атрибуты. Но для веб-дизайна вам понадобятся только два - это class и id. Обо всех остальных вы будете вспоминать только в экзотических случаях, и то не факт. Атрибут align, который раньше использовали, чтобы выровнять div по центру или по левому краю, считается устаревшим.
Когда использовать DIV
Представьте себе, что сайт — это холодильник, а DIV — это пластиковые контейнеры, по которым надо рассортировать содержимое. Вы же не будете класть фрукты в одну емкость с ливерной колбасой. Каждый вид продукта вы положите отдельно. Аналогичным образом формируется веб-контент.
Откройте любой сайт поделите его на смысловые блоки. Вверху шапка, внизу футер, в центре основной текст. Сбоку обычно находится колонка поменьше с рекламным контентом или облаком тегов.
Теперь разберите каждую секцию детальней. Начните с header. У шапки сайта есть отдельно логотип, навигация, заголовок первого уровня, иногда слоган. Каждому смысловому блоку назначьте свой контейнер. Так вы не только разделите элементы в потоке, но и сделаете легче их форматирование. Вам будет гораздо проще выровнять объект в теге DIV по центру, назначив ему класс или идентификатор.
Выравнивание DIV по центру с помощью полей
При обработке веб-элементов браузер учитывает три свойства: padding, marging и border. Отступы padding - это пространство между контентом и его границей. Margin — поля, отделяющие один объект от другого. Border — это линии вдоль блоков. Они могут быть назначены сразу со всех или только с одной стороны:
div{ border: 1px solid #333; border-left: none; }Эти свойства добавляют свободное пространство между объектами, а также помогают их выравнивать и размещать нужным образом. Например, если блок с картинкой нужно сместить от левого края к центру на 20%, вы присваиваете элементу margin-left со значением 20%:
Block-with-img{ margin-left: 20%; }
Также элементы можно форматировать используя значения их ширины и отрицательные отступы. Например, есть блок с размерами 200px на 200px. Сначала назначим ему абсолютное позиционирование и сместим его к центру на 50%.
Div{ position: absolute; left: 50%; }
Теперь, чтобы DIV по центру был расположен идеально, задаем ему отрицательный отступ влево, равный 50% его ширины, то есть -100 пикселей:
Margin-left: -100px;
В CSS такой способ называют «удаление воздуха». Но у него есть существенный недостаток в необходимости производить постоянные расчеты, что довольно сложно сделать для элементов с несколькими уровнями вложенности. Если заданы значения padding и border-width, браузер по умолчанию высчитает размеры контейнера как сумму толщины границ, отступов справа, слева и самого контента внутри, что тоже может стать неожиданностью.
Поэтому когда нужно выровнять DIV по центру, используйте свойство box-sizing со значением border-box. Оно не даст браузеру добавлять значение отступов и границ к общей ширине элемента DIV. Чтобы поднять или опустить элемент, также применяйте отрицательные значения. Но назначить в таком случае их можно либо верхнему, либо нижнему полю контейнера.
Как выровнять DIV блок по центру с помощью автоматических полей
Это простой способ центрировать крупные блоки. Вы просто назначаете ширину контейнера и свойство margin со значением auto. Браузер разместит блок посередине с одинаковыми полями слева и справа, выполнив всю работу самостоятельно. В результате, вы не рискуете запутаться в математических расчетах и существенно экономите свое время.
Используйте метод с автоматическими полями при разработке адаптивных приложений. Главное - назначать контейнеру значение ширины в em или процентах. Код из примера выше расположит DIV по центру и на любых устройствах, включая мобильные телефоны, он будет занимать 90% экрана.
Выравнивание через свойство display: inline-block
По умолчанию элементы DIV считаются блочными, и значение display у них стоит block. Для этого метода вам нужно будет переопределить это свойство. Подходит только для DIV с родительским контейнером:
Элементу с классом outer-div назначается свойство text-align со значением center, которое располагает текст внутри по центру. Но пока браузер видит вложенный DIV как блочный объект. Чтобы свойство text-align сработало, inner-div должен восприниматься как строчный. Поэтому в таблице CSS для селектора inner-div вы пишете следующий код:
Inner-div{ display: inline-block; }
Вы меняете свойство display с block на inline-block.
Метод transform/translate
Каскадные таблицы стилей дают возможность по желанию перемещать, скашивать, вращать и всячески трансформировать веб-элементы. Для этого используется свойство transform. В качестве значений указывается желаемый тип преобразования и степень. В данном примере мы будем работать с translate:
transform: translate(50%, 50%);Функция translate перемещает элемент из его текущей позиции влево/вправо и вверх/вниз. В скобках передаются два значения:
- степень перемещения по горизонтали;
- степень перемещения по вертикали.
Если элемент нужно передвинуть только по одной из осей координат, тогда вы указываете после слова translate имя оси и в скобках величину требуемого смещения:
Transform: translateY(-20%);
В некоторых руководствах можно встретить transform с вендорными префиксами:
Webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);
В 2018 году этого делать больше не нужно, свойство поддерживается всеми браузерами, включая Edge и IE.
Для того чтобы сместить нужный нам DIV по центру, CSS-функция translate записывается со значением 50% для вертикальной и горизонтальной оси. Благодаря этому, браузер сместит элемент с его текущей позиции наполовину от его ширины и высоты. Свойства width и height должны быть обязательно указаны:
Учитывайте, что элемент, к которому применяется свойство transform двигается в независимости от окружающих его объектов. С одной стороны, это удобно, но иногда сдвигаясь, DIV может перекрыть собой другой контейнер. Поэтому такой способ центрировать веб-компоненты считается нестандартным и применяют его только в случаях крайней необходимости. Трансформации по всем канонам CSS используют для анимации.
Работа с Flexbox-версткой
Flexbox считается сложным способом верстки веб-макетов. Но если вы ее освоите, то поймете, что она гораздо проще и приятнее, чем стандартное способы форматирования. Спецификация Flexbox — это гибкий и невероятно мощный способ обработки элементов. С английского языка название модуля так и переводится, как «гибкий контейнер». Значения ширины, высоты, расположения элементов настраиваются автоматически, без вычисления отступов и полей.
В предыдущих примерах мы уже работали со свойством display, но задавали ему блочное (block) и строчное (inline-block) значение. Для создания flex-макетов мы будем использовать display: flex. Сначала нам понадобиться flex-контейнер:
Чтобы преобразовать его во флекс-контейнер в каскадных таблицах, мы пишем:
Flex-container{ display: flex; }
Все вложенные в него объекты, но только прямые потомки, будут являться flex-элементами:
Если вовнутрь flex-контейнера поместить список, то пункты списка li не считаются flex-элементами. Flexbox-верстка будет действовать только на ul:
Правила размещения flex-элементов
Чтобы управлять flex-элементами, нужны justify-content и align-items. В зависимости от указанных значений, эти два свойства размещают объекты нужным образом автоматически. Если нам нужно выровнять все вложенные DIV по центру, мы записываем justify-content: center, align-items: center и больше ничего. Всю остальную работу браузер выполнит сам:
Чтобы выровнять текст по центру DIV, которые являются flex-элементами, можно использовать стандартный прием text-align. Или вы можете каждый вложенный DIV также сделать flex-контейнеров и управлять содержимым с помощью justify-content. Такой способ гораздо рациональнее, если внутри содержится разнообразный контент, включая графику, другие вложенные объекты, включая многоуровневые списки.
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button { height: 50px; line-height: 50px; }2.2. Для выравнивания блока по вертикали внутри родительского блока:
2.3. Вертикальное выравнивание по типу таблицы:
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
если для элемента не заданы размеры и он не пустой
Some text here
В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.
В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.
Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
CSS - Выравнивание блока по центру
1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.
Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.
Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.
Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по горизонтали
1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:
Block { margin-left: auto; margin-right: auto; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:
Parent { text-align: center; } .child { display: inline-block; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Выравнивание по вертикали
1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .
Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
Parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.