Веб-разработки с помощью CSS. Блок в центре блока: как быстро решить проблему?

CSS – язык стилей css. Старая технология, рожденная на заре интернета, сегодня активно развивается и позволяет решать многие проблемы, для которых раньше нужно было использовать JavaScript, родные средства.

Но в некоторые моменты мы все еще чувствуем слабость CSS. Блок в центре блока с такой тривиальной задачей остается по-прежнему актуальной проблемой для всех тех, кто все еще знает только основы веб-разработки. С появлением технологий на основе адаптируемых блоков и Grid Layout решить эту проблему стало гораздо проще, но они поддерживаются не всеми браузерами, и для той же версии IE 9, придется искать другие решения. Поэтому рассмотрим основные способы выравнивания блоков в CSS.

Выравнивание по горизонтали, или, Как в CSS разместить блок по центру

Проще центрировать диск в горизонтальной плоскости, здесь есть сразу несколько простых и красивых решений. Первый способ, чтобы использовать свойство margin, ответственный за внешние отступы и позволяет выровнять блок по центру. CSS позволяет сделать это очень элегантно. Важно не путать со свойством padding, благодаря которому вы можете установить интервал в помещении с любой стороны блока, «толкая» от границы содержания и создавая пространство между ними.

Второй метод состоит в том, чтобы использовать свойство text-align: center, если блок установлен линейный или сканирования области в поведение блоков (display: inline или display: inline-block). Автоматические отступы справа и слева через «margin: 0 auto»

Свойство margin позволяет эффективно позиционировать себя в CSS блок в центре блока-родителя, который подходит для случаев, в которых каждого элемента задано свойство display: block. Достаточно указать параметр margin: 0 auto; в файл CSS или с помощью атрибута style в HTML код. Расшифруем содержимое этого параметра: 0 – означает отсутствие внешних отступов сверху и снизу элемента; Авто – говорит вашему браузеру, чтобы он только рассчитывается отступ справа и слева, определяя свободное пространство по бокам и распределите равномерно на каждой стороне блока.

Если все сделано правильно, когда вы установите свойство margin: 0 auto; в CSS блок в центре блока срабатывает автоматически. Вы можете задать резонный вопрос: "Почему я не могу установить margin: авто, совместив блок еще и по вертикали?" К сожалению, эта опция не работает из-за этих характеристик, модель коробки, как вертикальный схлопывание внешних отступов.

Что делать, если устройство устанавливается линейное поведение?

Как мы говорили ранее, одной из ключевых особенностей CSS является то, что любой блок может быть установлен один из нескольких моделей поведения. Выше мы рассмотрели случай, когда функция-это блок не только на вид, но в положении «на поток», муссонов с другими элементами на странице.

Теперь мы рассмотрим случай, когда объект является линейным (display: inline), или сканирование области в поведение блоков (display: inline-block). И в первом, и во втором случае вы будете иметь свойства, которые регулируют поведение текста на странице. И идеально выровнять по центру в CSS поможет нам параметр text-align: center, что позволяет решить проблему без каких-либо трудностей. Мы требуем только своего блока-родителя, и наш элемент автоматически становится ровно пополам по горизонтали. На него будут влиять и другие свойства, как, например, vertical-align: middle создана для того, чтобы центрировать текст по вертикали.

Изящные CSS: мы используем свойство position: absolute

В CSS выровнять блок по центру можно даже с помощью абсолютного позиционирования. Для выравнивания элементов не стандартных, наиболее часто используемых являются свойство position: relative, что позволяет двигаться в любом направлении с сохранением оригинального места на странице, и через position: absolute, полностью «зоны» элемент из потока, и идеально подходит, чтобы поместить блок CSS, в центре блока в вертикальной плоскости.

Предположим, что наш объект 100px высота и ширина 200px, стандартный прямоугольник. Для того, чтобы выровнять по центру, делаем из него отступ слева и сверху 50 % (left: 50 % и top: 50 %), а после – отрицательные внешние отступы в этих краях в середине высоты и ширины блока (margin-left: -100px и top: -50px). Объяснить этот момент.

Свойства left и right с значение 50 %, чтобы «взять» элемент за левый верхний угол и с CSS блок в центре блока родителя. Но это еще не все. В этот момент в CSS выровнять блок по центру по-прежнему нельзя назвать точным, потому что в центре теперь находится только в верхнем углу элемента. Для того, чтобы получить лучший результат, мы должны выдвинуть элемент обратно на половину его ширины и высоты, используя для вертикальных отступов или более сложное свойство transform: translate(-50 %, -50 %), выполняет ту же функцию. Сейчас замок является совершенно безопасным. Наконец, обратите внимание, что можно решить проблему и с помощью технологии Flexbox, но он предназначен для продвинутых пользователей и не работает во всех браузерах.

Категория: Техника