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

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

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

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

Коротко.
Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.

Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.

В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
- Float;
- Inline-block;
- Table-cell (устаревший после выхода HTML5).

Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.

Вариант с использованием Float

Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.

Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.

Для примера, создадим четыре блока, которые нужно разместить в ряд:
<div class="block">Выравниваем</div>
<div class="block">блоки</div>
<div class="block">в один ряд</div>
<div class="block">по горизонтали</div>

Значения стиля в файле 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; имейте это ввиду.

Для прерывания действия свойства обтекания элементов используется конструкция:
<div style="clear: both;"></div>
без содержимого.

В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.

В этом случае поступаем так:

HTML код:
<div class="content"> <!-- Создаем дополнительный родительский блок -->
            <div class="block">Выравниваем</div>
            <div class="block">блоки</div>
            <div class="block">в один ряд</div>
            <div class="block">по горизонтали</div>
</div>

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.
- ширину и высоту блока можно задать фиксировано.
- эффект свёртывания границ отсутствует.

Приведу пример простого меню с картинкой и текстовой ссылкой с использованием блочно-строчного элемента.

HTML:
<div class="content2">
        <div class="menu">
            <p><img src="img/menu1.png" alt=""  /></p>
            <p class="string"><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div class="menu">
            <p><img src="img/menu2.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 2</a></p>
        </div>
        <div class="menu">
            <p><img src="img/menu1.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 3</a></p>
        </div>
        <div class="menu">
            <p><img src="img/menu2.png"  alt="" /></p>
            <p class="string"><a href="#">Ссылка меню 4</a></p>
        </div>
</div>

CSS:
.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качиваний: 1)

Автор: Saah | Просмотров: 35 | 18-10-2019,Пт, 11:09  

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

@
Похожие публикации