| Kosten | Понедельник, 19 Февраля 2018, 17:27 | Сообщение 1 |
| Центрирование HTML элементов с помощью CSS может быть удивительно сложной задачей. Правильное выравнивание по горизонтали относительно просто, но получение вертикального выравнивания может оказаться не таким легким. В последнее время мы погрузились в самые основные концепции компоновки CSS и изучили различия между абсолютным и относительным позиционированием. Мы будем следить за этим другим обсуждением CSS, на этот раз основанный на фундаментальном вопросе, который почти каждый новый разработчик спрашивает, как вы центрируете разные элементы.
Существует множество различных типов веб элементов и ситуаций размещения, каждый из которых требует уникального решения для центрирования, как по вертикали так и по горизонтали. Сегодня мы рассмотрим горизонтальное центрирование, чтобы вы могли задуматься о том, как они работают и уйти с уверенностью, чтобы сосредоточиться на чем угодно.
Горизонтальный центр элемента
Первый сценарий, который мы будем атаковать, на сегодняшний день является одним из наиболее распространенных, это центрирование элемента по горизонтали в окне просмотра или браузера. Чтобы начать работу, давайте раскроем простой div и дадим ему некоторый базовый стиль.
Код div {
height: 150px;
width: 150px;
background: #f7eded;
}
Как вы можете видеть, что по умолчанию наш div появляется в левом верхнем углу окна просмотра. Трюк здесь в том, что нам нужно, чтобы div оставался в центре окна, независимо от размера окна. Это означает, что мы не можем использовать абсолютное позиционирование. Чтобы поместить его в определенную точку, потому что это не будет сосредоточено на любых других возможных размерах окна.
Вместо этого нам нужно использовать значение «auto», которое можно применить к полям.
Вот как это работает:
Код div {
height: 250px;
width: 250px;
background: #cac3c3;
margin: 0 auto;
}
Как вы можете видеть, применение одной строки CSS бросило нашу коробку прямо в центр ее родителя, который в этом случае является телом. Для этого я использовал немного сокращений CSS. Если вам нужно обновить, сокращение поля начинается сверху и работает по часовой стрелке.
Код margin: 1px 2px 3px 5px; /* сверху 1px, справа 2px, снизу 3px, слева 5px */
Вы можете сократить это еще больше, если у вас есть только два значения, которые вам нужно назначить. В этом случае первый слот будет применяться к верхнему и нижнему полям, тогда как второй слот будет применяться к левому и правому полям. Вот еще один взгляд на наш центрированный div, на этот раз с объявленными полями.
Подробнее по отступам написано в статье создание отступов свойством margin и padding, что пригодится вею мастеру.
Код /*=== Method 1 ===*/
margin: 0 auto;
/*=== Method 2 ===*/
margin: 0 auto 0 auto;
/*=== Method 3 ===*/
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
Чтоб понятно было, за какие стороны отступа отвечают элеметы, читаем ниже.
margin-top - Выставляем отступ сверху;
margin-right - здесь по правую сторону;
margin-bottom - свойство, что отвечает за снизу;
margin-left - Ставим отступ по левую сторону;
Как вы можете видеть, наш элемент лишен верхних и нижних полей, но влево и вправо устанавливается значение auto, которое сохраняет элемент идеально по центру.
Что нужно помнить:
Есть несколько важных вещей, которые следует помнить об использовании трюка с автоматическими полями. Прежде всего, у вас должна быть указана определенная ширина для элемента, который вы центрируете. Объявление высоты не требуется, вы можете разрешить контенту определять высоту, если хотите, которая является настройкой по умолчанию, но ширина всегда должна быть задана.
Важно отметить, что хотя этот трюк будет работать на большинстве элементов уровня блока, а не только на div, это не поможет вам с вертикальным центрированием. В качестве примера давайте сделаем абзац внутри div, а затем попытаемся центрировать этот абзац в пространстве.
Вот подошли к основносу, а точнее, горизонтальное выравнивание по центру:
Код div {
height: 431px;
width: 431px;
background: #e8e8f3;
margin: auto;
}
p {
width: 60%;
margin: auto;
font: 14px/1.5 Helvetica, sans-serif;
}
Как вы можете видеть, у меня есть автоматические поля, установленные как в абзаце, так и в его родительском div. Это центрировало все красиво горизонтально, но оно не оказывало никакого влияния на вертикальное положение.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 19 Февраля 2018, 17:48 | Сообщение 2 |
|
| Горизонтальное центрирование элемента при помощи стилей CSS. Поскольку элемент с центрированным элементом имеет размеры, нам нужно будет оттянуть его назад, чтобы он идеально расположился посередине.
1. Вариант:
Код #somelement {
width: 187px;
position: absolute;
left: 49%;
margin-left: -100px
}
Первый вариант работает, когда вы знаете ширину абсолютно позиционированного элемента. Таким образом, он не очень гибкий или, как больше известен в адаптивном варианте.
2. Вариант:
Код #somelement {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
Второй вариант работает, когда вы не знаете ширину абсолютно позиционированного элемента. Отлично подходит для отзывчивости, но это CSS3, что у старых браузеров может быть проблема.
3. Вариант:
Код #somelement {
position: absolute;
left: 0;
right: 0;
margin: auto
}
Третий вариант работает, когда вы не знаете ширину абсолютно позиционированного элемента, но на 100% больше его родительского элемента, который может не соответствовать дизайну.
Если знаете как задавать ширину, вы можете использовать третий вариант, как хорошо, и это будет центр. Опять же требуется определенная ширина, поэтому она меньше гибкой.
| | Страна: (RU) |
| |
