Как поставить картинку по центру css
Перейти к содержимому

Как поставить картинку по центру css

  • автор:

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

горизонтального выравнивания блоков и картинок

Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.

Как выравнять картинку по горизонтали: справа, слева, по центру?

Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок 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

.content2 { width: 750px; /* фиксируем ширину родительского блока. Если задать 100%, то будут складываться при сужении экрана */ margin: 0 auto; /* центрируем родительский блок */ height: 60px; /* Высота родителя */ > .menu { display: inline-block; /* блочно-строчное отображение */ width: 120px; /* ширина отдельного блока */ vertical-align: top; /* текст меню выравниваем по верху */ > .string a{ text-align: center; /* текст по гориз. центру */ background: #5F4BE3; color: white; text-decoration: none; padding: 3px; >

В результате получили следующее:

выравнивания блоков по центру

Напоминаю: перед тем как работать с выравниваем картинки по горизонтали, её необходимо поместить в блок DIV.

Скачайте пример страницы с указанными выше HTML CSS кодами для практических экспериментов — скачать: Example_Horizontal_Alignment.rar [15,36 Kb] (cкачиваний: 46)

Сайт-визитка с Админкой

Галерея фото и видео, обратная связь

Автор: Саков | Просмотров: 7 630 | 2019-10-18

Добавить комментарий

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