Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
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
2.5. Абсолютное позиционирование блока
по центру страницы
div { width: 500px; height: 100px; /* если высота не будет задана явна, она будет равна 100% */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
по центру блока
От автора: вновь приветствую вас на страницах нашего блога. В сегодняшней статье я бы хотел рассказать о различных приемах выравнивания, которое можно применять как к блокам, так и к их содержимому. В частности, как выровнять блоки в css, а также о выравнивании текста.
Выравнивание блоков по центру
В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:
#header{ width / max - width : 800px ; margin : 0 auto ; |
Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!
Выравнивание текста
Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.
Выравнивание текста по вертикали
А вот это уже посложнее. По умолчанию нет такого простого общеизвестного свойства, которое бы легко центрировало текст в блочной контейнере по вертикали. Однако есть несколько приемов, которые за годы работы придумали верстальщики.
Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:
div{ background: #ccc; padding: 30px 0; }
div { background : #ccc; padding : 30px 0 ; |
Фон просто для того, чтобы визуально видеть края, а также внутренние отступы. Теперь высоту блока составляют два этих отступа и сама строка, а выглядит все это так:
Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.
div{ height: 60px; line-height: 60px; }
div { height : 60px ; line - height : 60px ; |
Результат будет аналогичен вышеприведенной картинке. Все будет работать, даже если вы добавите внутренние отступы. Однако, только для одной строки. Если вам нужно больше текста в элементе, то данный способ работать не будет.
Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:
div{ display: table-cell; vertical-align: middle; }
div { display : table - cell ; vertical - align : middle ; |
Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.
Ну вот мы и подошли к последнему на сегодня приему – это выравнивание самих блоков по вертикали. Нужно сказать, что тут опять же нет свойства, которое предназначалось бы специально для этого, но есть несколько приемов, о которых вы должны знать.
Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.
Этот способ позволяет сделать центровку только когда размеры позволяют сделать вычисления. А если у вас родитель 887 пикселей в высоту, то точно записать ничего не получится, это и так понятно.
Вставить элемент в ячейку таблицы. Опять же, если мы преобразуем родительский элемент в ячейку таблицы, то вставленный в него блок автоматом отцентрируется по вертикали. Для этого родителю всего лишь нужно задать vertical-align: middle.
А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!
Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах.
Один из самых простых и удобных тегов – CENTER предназначен для выравнивания блока текста. С помощью этого тега также можно центрировать рисунки и таблицы. Исключение составляют элементы или для которых выравнивание задается свойствами тега IMG. Так, если поместить элемент внутри тега CENTER, рисунок окажется выровненным по правому краю.
Пример 4.1. Центрирование с помощью тега CENTER
Данный текст будет выровнен по центру окна браузера, а нижележащий
рисунок по правому краю.
Формально CENTER должен использоваться только как параметр других блочных тегов (P, PRE и другие). Однако в браузере Netscape Navigator 2.0 CENTER был введен как самостоятельный тег. Это дополнение было призвано убрать лишний вертикальный отступ, который появляется при использовании блочных тегов. Если вместо тега CENTER текст поместить внутрь параграфа (
) , появляется дополнительный вертикальный отступ между горизонтальной линией и этим текстом.
CENTER не входит в спецификацию HTML. В «официальном» HTML форматирование, такое как выравнивание текста должно производится через атрибуты тегов (например,
) или с использованием стилей. Тем не менее, этот тег обрел право на существование. Однако после опубликования спецификации HTML 4 W3 Консорциум рекомендовал воздержаться от использования тега CENTER, а вместо него использовать элемент
Пример 4.2. Центрирование с помощью тега DIV
Выравнивание текста по центру с помощью тега DIV
Еще один способ центрирования заключается в использовании стилей. Стили представляют собой инструкции, которые позволяют управлять атрибутами форматирования как шрифт, цвет, выравнивание и др. Пример переопределения тега P для центрирования текста.
Пример 4.3. Центрирование с помощью стилей
Теперь, когда вы будете использовать тег P с вышеуказанным
стилем, текст параграфа будет выровнен по центру окна браузера
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: Посетителю должно быть легко найти нужную информацию на странице. Для этого, а также для выражения некоторой экспрессии используются различные теги HTML. В данной статье будет рассмотрены нюансы работы с таблицами, в частности - их выравнивание. В первую очередь следует заметить, что эта графическая форма представления данных позволяет структурировать информацию, что значительно облегчает ее усвоение. Внутри ячеек таблицы может находиться практически любой контент: от текста до видеоролика. При этом важно учесть не только размер, но и его расположение. Чаще всего нужно оформить таблицу по центру страницы, хотя изначально она прижата к левой стороне страницы. Для того чтобы выровнять её по центру, нужно задать ей свойство margin со значением auto.
Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы. Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег
Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега
С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю
Основные тонкости
Как сделать саму таблицу по центру
...
Выравнивание по центру в ячейках
, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение "center", в зависимости от вашей задачи:
Текст по центру ячейки
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows