Выравнивание по центру в html и css

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

Элементы бывают разные — блочные и строчные. В этой статье мы подробно разберем все способы их выравнивания. Их можно выравнивать как через CSS, так и через атрибуты в HTML. Будет подробно описано выравнивание по горизонтали и вертикали.

Выравнивание по горизонтали

Заранее скажем о том, что элементы могут быть блочными и строчными. Тег

display:block 
— блочный, он не требует переноса строки. Теги
<p>, <h1>, <h2>
и так далее — строчные, каждый из них требует переноса строки.

Задать этот параметр можно через CSS. Для этого используется свойство display. display:block — блочный элемент, display:inline или inline-block — строчный и полублочный.

Выравнивание строчных элементов по горизонтали

Строчные элементы обычно не имеют никаких трудностей с выравниванием по горизонтали. Их расположение можно задать через html атрибут text-align:

<p text-align="center">Текст</p>
— выравнивает текст по центру.

Данный способ работает не со всеми элементами. Его можно применять с параграфами, заголовками, изображениями, а также таблицами.

Кроме атрибута text-align, в html имеется специальный тег. Он работает также, но немного устарел, поэтому лучше пользоваться 1 способом. Пример использования тега:

<center>Текст</center>

Эти способы хороши, но выравнивание через css всё равно остаётся более приоритетным вариантом.

Горизонтальное выравнивание элементов со свойством «display: block»

С элементами, которые являются блочными, например, с тегом

<center>
, вышеуказанный способ не сработает. Связано это с тем, что такой элемент расположен по всей ширине родительского элемента. Так как ему выравниваться негде, он остается на месте.

Но не спешите огорчаться, есть метод, который позволит выровнять его через html. Для этого нужно уменьшить его ширину. Изначально его ширина равна 100% ширины родительского элемента. Вы же можете изменить её, лучше через CSS.

Эффект может быть не заметен. Чтобы наглядно увидеть то, как это работает, задайте цвет фона или сделайте рамку для этого блока.

Немного об адаптивности — не задавайте ширину элемента в пикселях, наиболее хорошим вариантом будут проценты. То есть, если вся страница — 100%, то внутренний контент можно сделать равным 80%. Это активно используется почти на всех современных сайтах.

Свойство margin

Это свойство можно назвать аналогом атрибута

<text-align>
или тега
<center>
. Его можно применять только к строчным элементам, либо же к уменьшенным блочным.

Автоматическое выравнивание по центру:

margin: 0 auto;

Как только элементу будет присвоено данное свойство, он автоматически будет расположен в центре экрана.

Вышеуказанный вариант — упрощенная запись. Можно написать 4 отдельных свойства, для каждой стороны элемента:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

По сути, это тоже свойство margin: 0 auto, но лучше так не писать. Вышеуказанные 4 свойства лучше использовать, когда необходимо задать особое расположение элементу.

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

Немного об адаптивности

Мы показывали работу этих методов с использованием пикселей.

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

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

По вертикали можно выровнять только блочный элемент, либо же полублочный. Задаются они так:

display: block; — блочный элемент.

display: inline-block — полублочный элемент.

Внимание! Советуем делать все строчные элементы полублочными, для удобства.

Ещё в начале обучения вертикальное выравнивание может поставить в тупик. Однако, здесь всё просто, просто немного математики. Для этого просто вычисляем ширину родительского блока (того, в котором и расположен нужный элемент). Делим полученное значение на 2, с округлением в большую сторону, а затем задаем соответствующее свойство.

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

margin: 50px auto;

Выравнивает по центру, как по вертикали, так и по горизонтали.

Почему 500, а не 1000? Потому что отступы делаются снизу и сверху. 500 снизу, 500 сверху = 1000.

Но есть и более простой способ. Свойство — margin: auto. Оно располагает блок по центру.

Его минусом является то, что он не работает на всех браузерах, так как значения элементов не всегда известны.

Другие хорошие свойства:

  1. line-height — задает высоту строки;
  2. vertical-align: middle — выравнивает по вертикали. Не работает c элементами «block».

Также неплохо использовать абсолютное позиционирование, но оно подходит для редких случаев.

Margin и padding

Эти 2 свойства хорошо подойдут для того, чтобы увеличить размер родительского блока.

margin: 300px; = padding: 300px;

Подробнее о line-height

Чтобы использовать данное свойство, вам нужно знать точную высоту блока-родителя. Если указать неверное значение, текст может неправильно переносится.

Это отличный инструмент при создании сайдбара.

Просто задаем размер line-height, такой же, как и высота родителя.

line-height:300px; — при высоте родителя в 300px.

Выравнивание иконок

Иконки могут иметь большую высоту, чем строка. Можно изменить строку через line-height, но лучше использовать свойство vertical-align.

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

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

Вот пример создания таблицы:

<div class="table">                   								
<div class="cell">	  
	<h1>Заголовок</h1>
	<p>текст</p>                                                  			
	</div>
</div>
.table{
	display: table;
}
.cell{
	display: table-cell;
}

Position: absolute

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

Блок можно свободно перемещать через свойства top, left, bottom, right. По сути, вы просто задаете ему расположение относительно четырех указанных сторон.

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

Вот пример абсолютного позиционирования в CSS:

.all_content{
position: relative;
}
.content{
position: absolute;
margin: auto;
top: 250px;
bottom: 0;
left: 350px;
right: 0;
}

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

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



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *