Варианты горизонтального выравнивания блоков и картинок по центру справа слева
Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.
Как выравнять картинку по горизонтали: справа, слева, по центру?
Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.
Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.
В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
— Float;
— Inline-block;
— Table-cell (устаревший после выхода HTML5).
Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.
Вариант с использованием Float
Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.
Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.
Для примера, создадим четыре блока, которые нужно разместить в ряд:
Значения стиля в файле CSS:
.block { float: left; /* обтекание */ line-height: 60px; /* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-top: 60px; margin-right: 10px; >
Получает результат, который вы видите на картинках ниже.
При отсутствии float: left;
С размещенным float: left;
При уменьшении экрана, когда блоки благодаря своему размеру width: 180px; перестанут умещаться в одну линию, они начнут складываться друг под друга.
Этот же пример с использованием float: right;
Как видите блоки (судя по тексту в них) поменяли порядок размещения. Браузер обработал их сверху вниз и выровнял по правому краю, соблюдая очерёдность — сначала выравнял первый, потом второй и т.д. При работе со свойством float: right; имейте это ввиду.
Для прерывания действия свойства обтекания элементов используется конструкция:
В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.
В этом случае поступаем так:
CSS код:
.content { width: 750px; /* фиксируем ширину родительского блока */ margin: 0 auto; /* центрируем родительский блок */ background: #FFFFCC; height: 60px; /* Высота родителя */ > .block { float: left; /* Задаем обтекание */ line-height: 60px;/* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-right: 10px; > .content :last-child { margin-right: 0px; /* Убираем последнее правое поле* / >
Результат:
На практике могут встретиться различные ситуации, но всех особенностей в одной статье не рассмотреть.
Метод «Inline-block»
Как уже говорилось, блочные и строчные элементы имеют свои недостатки и преимущества в зависимости от поставленной задачи. Возьмём только преимущества и попробуем их объединить. Для этого знакомимся со свойством display: inline-block.
Свойство display: inline-block создаёт блочно-строчный элемент, который можно расценивать как строчный, с сохранением блочных свойств. Он позволяет изменять линейные параметры, задавая отступы, поля и т.п.
Свойства блочно-строчного элемента:
— ширина и высота блока определяется автоматически, в зависимости от содержимого и присутствия отступов padding.
— ширину и высоту блока можно задать фиксировано.
— эффект свёртывания границ отсутствует.
Приведу пример простого меню с картинкой и текстовой ссылкой с использованием блочно-строчного элемента.
Ссылка меню 1 длиннее обычного
Ссылка меню 2
Ссылка меню 3
Ссылка меню 4