HTML выравнивание по центру. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы
Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег 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 с вышеуказанным
стилем, текст параграфа будет выровнен по центру окна браузера
Вообще центровка HTML элементов на странице - это дело не сложное. В некоторых случаях... веб разработчикам приходится ломать голову, чтобы найти лучшее решение.
Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:
Горизонтальная центровка с помощью text-align
Порой, самое простое решения является самым лучшим:
Div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; }
Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.
Центровка с помощью margin: auto
Ещё одно решения для горизонтальной центровки:
Div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }
Заметьте что для этого способа нужно выставить свойство display: block.
Центровка с помощью table-cell
Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.
Center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; }
Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.
Абсолютная центровка
Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:
Absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%); } .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Центрируем с помощью translate
Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:
Center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; }
Есть несколько минусов:
- Свойство CSS transform требует использование браузерных префиксов
- Не работает в старых версиях IE (8 и ниже)
- Внешнему контейнеру нужно задавать высоту.
- Если внутри контейнера есть текст, то он может быть немного размыт.
Центровка с помощью вида отображения flex
Наверное самый простой вариант.
Center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; }
Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:
Center { background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 и ранних версиях; Android, старых WebKit */ display: -moz-box; /* Firefox (может и глючить) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
Центровка с помощью calc
В некоторых случаях, данный способ более универсален чем использование flexbox:
Center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; } .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }
Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:
Top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:
Center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px - 2)); }
Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:
Center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%); left: calc(50% - 20%); }
Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.
Доброго времени суток, подписчики и читатели данной публикации. Сегодня я хочу вдаться в подробности и рассказать вам, как в css выровнять текст по центру. В некоторых предыдущих статьях я косвенно затрагивал данную тему, поэтому кое-какие знания в этой области у вас имеются.
Однако в данной публикации я расскажу вам о всевозможных способах выравнивания объектов, а также объясню, как делать отступы и красные строки в абзацах. Так что давайте приступать к изучению материала!
Html и его детища и align
Данный способ почти не используется, так как его вытеснили инструменты каскадных стилевых таблиц. Однако знание, что такой тег существует, вам не помешает.
Что касается валидации (данный термин подробно описан в статье « »), то в самой спецификации html осуждается использование < center> , так как для валидности необходимо использовать переходной DOCTYPE> .
Такой тип пропускает запрещенные элементы.
Теперь перейдем к атрибуту align . Он задает горизонтальное выравнивание объектов на и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left ), по правому краю (right ), по центру (center ) и по ширине текста (justify ).
Ниже я приведу пример, в котором картинку и абзац расположу по центру.
Этот контент будет расположен по центру.
Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.
В примере я использовал align=" middle" . Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.
Инструменты центрирования в css
Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.
Итак, начнем с первого свойства центрирования текста — это text- align .
Оно функционирует так же, как и align в . Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit ).
Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).
Предложение справа
Предложение c использованием end
Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last .
Для выравнивания содержимого сайта или ячеек таблиц по вертикали используется свойство vertical-align . Ниже я описал основные ключевые слова элемента.
Ключевое слово | Предназначение |
baseline | Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у. |
middle | Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя. |
bottom | Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех. |
top | Аналогично bottom, только с верхней частью объекта. |
super | Делает символ надстрочным. |
sub | Делает элемент подстрочным. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ЦВЕТОК
|
Отступы
И наконец мы дошли с вами до отступов в абзаце. В языке css используется специальное свойство под названием text-indent .
С его помощью можно сделать как красную строку, так и выступ (нужно указать отрицательное значение).
Для создания красной строки нужно знать всего лишь один параметр.
Им является простое свойство text-indent.
Хвалю тех, кто опробовал каждый пример на практике. Отправляйте ссылки на мой блог друзьям и не забывайте подписываться. Удачи! Пока-пока!
С уважением, Роман Чуешов
Прочитано: 675 раз
Windows : Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx и 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .
Linux : Firefox 1.0+, Chromium, Opera 5.0 - 6.xx и 9.0+, SeaMonkey 1.0+ [ 2 ] .
Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью HTML - без CSS. Контейнер, в котором будет находится содержимое веб-страницы выравнивается по центру - по ширине и по высоте: [ Открыть страницу-пример ].
А так же в Netscape 2.02 - 4.80 и Offbyone. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.
А так же в Netscape 2.02 - 4.80. В Netscape 2.02 - 4.80 имеется некоторое смещение содержимого страницы в верхний левый угол видимой области окна браузера из-за того, что эти программы резервируют место для полос прокрутки.
Aliosque subditos et thema
CSS только для браузера Opera: В Opera этот текст красного цвета HTML / XHTML. Code:
В Opera этот текст красного цвета
CSS. Code: doesnotexist:-o-prefocus, p {color: #f00;} Псевдокласс -o-prefocus позволяет применять стили к элементам так, чтобы это отображалось только в браузере Opera. Код помещается в общий файл CSS, а не в отдельный как в случае с условными комментариями Internet Explorer"а. Источник: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/ [ 1 ] Opera 3.5 - 5.0 игнорирует "doesnotexist:-o-prefocus" и воспринимает CSS код как p {color: #f00;}. Opera 6.0 - 9.4 игнорирует весь код, начинающийся с "doesnotexist". [ 2 ] Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+, Mozilla 1.5+ игнорируют весь код, начинающийся с "doesnotexist". Старые браузеры, например, Internet Explorer до версии 5.5 или Netscape до 7.2 или Mozilla до 1.5 похоже игнорируют необычный, специфичный для Opera 9.5 и более новых версий, CSS код. Применяя стили только к тому, что они воспринимают - в данном случае тег p; делая текст в нем красного цвета. [ 3 ] Текст становится красным так же в Dillo 3.0.1.Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором будет находиться всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте - [ Открыть страницу-пример ]. HTML / XHTML. Код: