HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 2. Адаптив. · GitHub
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 2. Адаптив.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| HTML | |
| <div> | |
| <div> </div> | |
| </div> | |
| <div> | |
<img src=»http://lorempixel. com/200/200/sports/»> | |
| </div> | |
| CSS | |
| .wrap { | |
| width: 400px; | |
| height: 400px; | |
| position: relative; | |
| } | |
| .content { | |
| width: 200px; | |
| height: 200px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| left: 0; | |
| margin: auto; | |
| } | |
. wrap img { | |
| width: 200px; | |
| height: 200px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| left: 0; | |
| margin: auto; | |
| display: block; | |
| /* Для изображений в целях профилактики ставится «display: block», поскольку браузер по умолчанию добавляет к ним небольшую границу, которую лучше удалить */ | |
| } | |
Центрирование (горизонтальное и вертикальное) при помощи CSS 3
Главная » Верстка
Верстка
Автор Алексей На чтение 3 мин Просмотров 749 Опубликовано Обновлено
Сегодня поговорим о том как при помощи css 3 отцентрировать элементы по вертикали и горизонтали.
Содержание
- Центрирование по вертикали
- Абсолютное позиционирование (transform)
- Вертикальное центрирование с использованием flex
- Вертикальное и горизонтальное центрирование
- Центрирование в области просмотра
Центрирование по вертикали
Абсолютное позиционирование (transform)
Вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:
Для html разметки, которая выглядит так:
<div> <p>Какой то текст…</p> </div>
Со следующими базовыми стилями (css правилами):
.container {
height: 10em;
}
.container p {
margin: 0;
}В таблицу стилей добавить основные правила:
- Делаем контейнер относительно позиционированным (position: relative).
- Сам элемент делаем абсолютно позиционированным (position: absolute).
- Помещаем элемент посередине контейнера с помощью ‘top: 50%’. (делаем отступ на 50% высоты контейнера.)
- Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
.container {
height: 10em;
position: relative /* 1 */
}
.container p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) /* 4 */
}Вертикальное центрирование с использованием flex
Возьмем выше приведенную html структуру и базовые CSS классы. Допишем им классы выравнивания при помощи flex:
.container {
height: 10em;
display: flex; /* 1 */
align-items: center /* 2 */
}
. container p {
margin: 0;
}
container p {
margin: 0;
}Т.к. не все браузеры идеально поддерживают технологию flex, для лучшей поддержки советую воспользоваться бесплатным инструментом: Autoprefixer.
Вертикальное и горизонтальное центрирование
Мы можем расширить методs указанные выше, чтобы центрировать по горизонтали и по вертикали одновременно.
Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). Разметку и стили берем с «Абсолютное позиционирование (transform)». Теперь добавим классы горизонтального выравнивания с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:
.container {
height: 10em;
position: relative
}
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}А если использовать ‘flex’, всё становится намного легче:
.
container {
height: 10em;
display: flex;
align-items: center;
justify-content: center
}
.container p {
margin: 0
}т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.
Центрирование в области просмотра
Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h2>Красиво выровнен по центру</h2>
<p>Этот текстовый блок выровнен вертикально по центру.
<p>И горизонтально, если окно достаточно широкое.
</section>Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.
Поделиться с друзьями
Оцените автора
( 1 оценка, среднее 4 из 5 )
Центрировать Div по горизонтали и вертикали: 5 способов центрировать Div по вертикали и горизонтали с помощью CSS
. Каждый разработчик должен был хотя бы раз или каждый день сталкиваться с задачей центрирования div в своей жизни. У всех у нас есть своя удобная техника, но для начинающих она может иногда разочаровывать.
В этой статье я собрал список различных приемов CSS для центрирования блока div по горизонтали и вертикали на странице, выберите один или два приема и сделайте их своими любимыми.
Я хотел, чтобы эта техника была на высоте, так как она моя любимая из всех. В этом трюке все свойства CSS определяются в родительском контейнере.
Мы определяем родителя со свойством display: flex вместе с justify-content (горизонтальное размещение по умолчанию) и align-items (вертикальное размещение по умолчанию) center. Эти свойства поставляются со спецификациями Flex. Одна ошибка, чтобы заставить эту работу работать, предоставляя фиксированную ширину и высоту для родителя.
Метод 2: Использование сеткиИспользуя CSS Grid, мы можем достичь нашей цели двумя способами. Во-первых, с использованием свойств ‘place-items’ , а во-вторых, с использованием ‘выровнять и оправдать себя’ . Опять же, эти свойства являются эксклюзивными для CSS Grid.
а) Используя место-элементов , мы предоставляем правила родительскому элементу, и только он творит чудеса. Мы даем родителю ‘display: grid’ и ‘предметы места: центр’ и все готово, все становится супер по центру.
b) Используя ‘justify and align-self’ , мы предоставляем родительскому контейнеру свойство ‘display: grid’ , а основные свойства передаются дочернему контейнеру - 9 9 align-self’ (вертикальное размещение) и ‘justify-self’ (горизонтальное размещение) пропсы получают значение по центру.
Метод 3: использование позиционирования CSS и преобразования CSSЭто один из старых методов, которым мы следуем, чтобы центрировать элементы на странице. Мы делаем позицию дочернего контейнера абсолютной в родительском контейнере и перемещаем дочерний контейнер на 50% сверху и слева от родителя.
Метод 4: использование поля CSS Еще один метод старой школы прекрасно работает во всех браузерах. Все, что нам нужно сделать, это определить ‘margin: 0 auto’ стиль для дочернего контейнера.
Я лично столкнулся с некоторыми несоответствиями при использовании этого метода, поэтому я всегда добавляю дополнительные свойства для центрирования элементов.
Это один из распространенных методов, используемых с момента рождения «Позиционирование CSS» . Мы делаем дочерний контейнер «абсолютным» для родительского и определяем верхнее, левое, правое и нижнее свойства «0» вместе с ‘поле: авто’ .
Бонусный метод: использование таблицы CSSПримечание. CSS-вставка — это сокращение для свойств сверху, слева, справа и снизу (в настоящее время это свойство поддерживается только в Firefox)
вставка: 2px 3px 4px 5px /* верхний правый нижний левый */
Я знаю, что все мы широко используем ‘CSS-таблицу’ в нашем приложении, которое имеет множество табличных свойств.
Я был удивлен, обнаружив, что мы можем использовать свойство таблицы для центрирования содержимого и элементов в контейнере, и теперь мы можем делать это двумя способами.
Мы должны предоставить ‘display: table’ оболочке (которая является уровнем выше родительского), затем мы используем свойство ‘display: table-cell’ в родительском элементе.
Различие между дочерними свойствами - двумя способами заключается в использовании свойства ‘margin’ , а во втором — ‘display: inline-block’ .
Мы подошли к концу этой статьи. Я прикрепил Codepen ниже, где вы можете найти все вышеупомянутые трюки в одном месте, поиграть с ними и поделиться здесь, если вы будете следовать каким-либо крутым трюкам, чтобы центрировать вещи.
Надеюсь, эта статья окажется для вас полезной и информативной. Если вам понравилась эта статья, поставьте мне палец вверх 👍 Не забудьте добавить ее в закладки для дальнейшего использования 🔖
Спасибо за чтение 🤓
Как вертикально центрировать элементы с помощью Bootstrap
Вертикальное центрирование объектов в веб-дизайне может привести к чрезмерные головные боли.
Вот как вы можете легко центрировать объекты по вертикали, используя простой HTML и Bootstrap по умолчанию.
Вертикальное центрирование объектов должно быть одной из самых простых частей вашего опыта проектирования. Однако чаще всего вы тратите часы, пытаясь выровнять изображения или текстовые поля, чтобы они соответствовали другим на странице. Этого достаточно, чтобы свести с ума даже лучших веб-дизайнеров.
Раньше вам приходилось знакомиться с Flexbox и создавать несколько пользовательских классов для выполнения простой задачи центрирования элементов по вертикали.
К счастью, есть лекарство. Последняя версия Bootstrap поставляется с классами по умолчанию, которые значительно упрощают центрирование контента по вертикали.
Минимум кода с максимальным количеством смайлов. На самом деле, мы использовали его на нашем новом веб-сайте Solodev, и наши разработчики были значительно счастливее, когда элементы веб-сайта выравнивались так, как они хотели.
(Конечно, в офисе было много счастливых дней.)
Вот HTML-код, необходимый для вертикального выравнивания вашего собственного веб-сайта и центрирования хорошего веб-дизайна:
В качестве базового примера вы можете захотеть иметь раздел с отображаемым изображением, один столбец и некоторый текст, отображаемый в другом столбце. По умолчанию оба элемента будут выравниваться по верхнему краю раздела, что может показаться странным. В идеале вы хотели бы, чтобы текст был выровнен по вертикали по центру изображения. Этот стандартный раздел с вертикально выровненным текстом можно создать с помощью следующей разметки:
<раздел> <дел> <дел> <дел> <дел> 
