Каждый верстальщик постоянно сталкивается с необходимостью выравнивания контента в блоке: по горизонтали или по вертикали. Есть несколько неплохих статей на этот счет, но все они предлагают много интересных, но мало практичных вариантов, из-за чего приходится тратить лишнее время, чтобы выделить главное. Решила подать эту информацию в той форме, которая удобна мне, чтобы больше не гуглить.
Выравнивание блоков с известными размерами
Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).
Выравнивание при помощи padding
Иногда можно не центрировать элемент, а добавить ему границы свойством "padding
".
Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.
Если для блока задано "position: absolute
", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top
","right
","bottom
","left
") внутреннего блока присвоить одинаковое значение, а также "margin: auto".
*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).
.example-wrapper2
{
position
: relative
;
height
: 250px
;
background
: url(space.jpg)
;
}
.cat-king
{
width
: 200px
;
height
: 200px
;
position
: absolute
;
top
: 0
;
left
: 0
;
bottom
: 0
;
right
: 0
;
margin
: auto
;
background
: url(king.png)
;
}
Горизонтальное выравнивание
Выравнивание посредством "text-align: center"
Для выравнивания текста в блоке есть специальное свойство "text-align
". При установленном значении "center
" каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.
Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац - ведь суть не с нем, а суть в выравнивании.
Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto
" (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.
Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.
Вертикальное выравнивание
С вертикальным выравниванием намного больше проблем - по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.
Выравнивание свойством line-height
В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height
" и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.
Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".
У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.
Выравнивание по вертикали в таблицах
Свойство "vertical-align
" также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell
".
Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.
Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.
Выравнивание дополнительным inline-элементом
И для inline-элементов можно применить "vertical-align: middle
". При этом все элементы с "display: inline
", которые находятся в одной строке, выровняются относительно общей центральной линии.
Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы:before или:after.
Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.
Пока что такой способ практически не встречался мне, но особых ограничений для него нет.
Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!
При верстке страницы часто необходимо совершить выравнивание по центру CSS-способом: например, центрировать основной блок. Существует несколько вариантов решения этой проблемы, каждый из которых рано или поздно приходится использовать любому верстальщику.
Выравнивание текста по центру
Часто в декоративных целях требуется задать тексту выравнивание по центру, CSS в этом случае позволяет сократить время верстки. Раньше это делалось с помощью HTML-атрибутов, теперь же стандарт требует выравнивать текст с помощью таблиц стилей. В отличие от блоков, для которых нужно изменять внешние отступы, в CSS выравнивание текста по центру производится с помощью одной строки:
text-align:center;
Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.
Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.
Выравнивание блока по центру
Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):
margin:0 auto;
Сейчас именно этот вариант признан абсолютно валидным. Использование внешних отступов также позволяет задать выравнивание картинки по центру: позволяет решать много проблем, связанных с позиционированием элемента на странице.
Выравнивание блока по левому или правому краю
Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой - с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:
.left {float:left;}
.right{float:right}
Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:
.left {float:left;}
.right{float:right}
footer {clear:both}
Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.
Вертикальное выравнивание
Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:
выравнивание по верхней границе — .child{vertical-align:top};
выравнивание по центру — .child{vertical-align:middle};
выравнивание по нижней границе — .child{vertical-align:bottom};
На блочные элементы ни text-align, ни vertical-align не действуют.
Возможные проблемы с выровненными блоками
Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:
.second{float:left}
.third{float:right}
.clearfix{height:0; clear: both;}
Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):
Приведенные выше варианты — самые распространенные, хотя вариаций существует несколько. Всегда можно найти наиболее простой и удобный способ создания псевдораспорки путем экспериментов.
Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.
Выравнивание блоков позволяет создать красивые и функциональные страницы: это и верстка общего макета, и расположение товаров в интернет-магазинах, и фотографии на сайте-визитке.
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом
. Пришло время разобраться с тем, как выравнивать текст на странице HTML
. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег
. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами
:
Выравнивание элементов в HTML
Текст с левой стороны
Центральный текст
После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег
- значит должны быть и теги
, и
. Заключив содержимое в теги
вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег
, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега
он просто его пропустил. Тегов
и
не существует.
Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера
, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
Элемент
является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры
. У тега
есть атрибут align
, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left
, center
, right
. Давайте напишем код, где расположим элементы в различных частях браузера:
Выравнивание элементов в HTML
Текст, расположенный слева
Текст, расположенный по центру
Текст, расположенный справа
В данной статье вы научились выравнивать текст на html-странице
.
Свойство CSS text-align
отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.
Синтаксис CSS text-align
...
text-align
: center | justify | left | right | inherit
;
...
center
- выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
justify
- растягивание текста по всей ширине области
left
- выравнивание по левому краю
right
- выравнивание по правому краю
inherit
- принять значение предка (родителя)
Чаще всего эти свойства применяются в блоках
и абзацах
Примечание:
Есть также свойство vertical-align , которое отвечает за вертикальное выравнивание.
Как сделать выравнивание текста в html
Пример №1.
Выравнивание текста по левому краю. Действуют по умолчанию.
Выравнивание текста по левому краю
Выравнивание текста по левому краю
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
Выравнивание текста по центру
На странице преобразуется в следующее
Выравнивание текста по левому краю
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
Выравнивание текста по правому краю
На странице преобразуется в следующее
Выравнивание текста по правому краю
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Выравнивание текста по ширине всей области
Иногда text-align: justify;
может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
Примечание
Вместо свойства text-align
можно также использовать атрибут align
, который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Выравнивание по центру
Выравнивание текста по ширине всей области
...
...
Разница в тегах
и
В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
В данной статье я расскажу, как поместить блок div по центру
. Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.
Вообще, есть дюжина способов как правильно выровнять div блок по центру, каждый вебмастер использует свой любимый\наиболее удобный способ. Но тем не менее, есть несколько основных, наиболее популярных и универсальных способа. И конечно-же, валидные по всем современным стандартам.
И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.
Итак, что мы имеем?
Способ 1. Самый крутой
margin:0 auto;
Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.
К примеру, для выравнивания сверху пишем:
Margin:10px auto;
Для выравнивания сверху и снизу:
Margin:10px auto 5px;
На мой взгляд — это самый лучший способ выровнять блоки по центру
. К тому-же он полностью валидный.
Способ 2. Процентный
Если блок имеет ширину в процентах, то мы можем выровнять div по центру
применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:
Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:
Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) 🙂
Способ 3. Смешанный
Данный способ посоветовал в комментариях sman
.
Как я упоминал в начале статьи, способов выровнять блок по центру огромное множество. Каждый выбирCgает тот, который ему больше по душе. Жду комментариев и новых способов 🙂
Способ 4. Использование дополнительного блока
Способ Виктор
в комментариях:
Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).
В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:
