Картинки выравнивание по центру – Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива?

Leave a Comment / Разное / By /

Содержание

Выравнивание картинки по центру HTML и CSS

Приветствуй вас на сайте Impuls-Web!

Довольно часто, при верстке сайтов веб-разработчик сталкивается с необходимостью выравнивания изображений по центру. И если для опытного разработчика это не является проблемой, то у начинающего это может вызвать некоторые трудности.

Навигация по статье:

Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.

Обучение фотошоп

Выравнивание картинки HTML

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:

<head> <style> .pic { text-align: center; /* Выравнивания картинки по центру в html */ } </style> </head> <body> <p><img src=»images/img.jpg» alt=»pic»></p> </body> </html>

<head>

  <style>

   .pic {

    text-align: center; /* Выравнивания картинки по центру в html */

   }

  </style>

</head>

<body>

  <p><img src=»images/img.jpg»  width=»250″ alt=»pic»></p>

</body>

</html>

Или же можно сделать еще проще и добавить в тег <img> атрибут style:

<p><img src=»images/horx.jpg» alt=»img» /></p>

<p><img  src=»images/horx.jpg» alt=»img» /></p>

Выравнивание картинки по центру CCS

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

HTML:

<img srcimages/mokup.jpg» alt=»img» />

<img srcimages/mokup.jpg» alt=»img» />

CSS:

.center-pic{ display:block; margin:auto; }

.center-pic{

display:block;

margin:auto;

}

Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:

.conteiner img{ display:block; margin:auto; }

.conteiner img{

     display:block;

     margin:auto;

}

Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.

HTML:

<p><img src=»//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg» alt=»img» /></p>

<p><img src=»//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg» alt=»img» /></p>

CSS:

.center-pic{ text-align:center; }

.center-pic{

text-align:center;

}

С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center;

или margin:auto, в зависимости от ситуации.

На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.

Как научиться продвигать сайты?

Не забывайте делиться статьей в социальных сетях и оставлять комментарии, а так же заходите на мой канал на YouTube, где вы найдете много интересных видео по разработке сайтов, обзору полезных плагинов и скриптов.

Желаю вам успехов в создании своего сайта! До встречи в следующей статье!

С уважением Юлия Гусарь

Три способа выравнивания html картинки по центру

В этой статье мы разберем три простых техники, с помощью которых мы можем выровнять html картинки по центру экрана. Для урока я создал простую html страничку с базовой разметкой и пустой css файл.

Нам понадобится div обертка и изображение, которое мы возьмем на сайте placehold.it. Первое, что мы сделаем это создадим div с классом image-wrap, и в него добавим изображение.

<div> <img src=»http://placehold.it/350×150″ > </div>

<div>

   <img src=»http://placehold.it/350×150″ >

</div>




Дальше пропишем базовые стили для класса image-wrap. Это будет высота и ширина, немного больше чем картинка. И сплошную рамку размером 1px.

.image-wrap { width: 500px; height: 300px; border: 1px solid gray; }

.image-wrap {

  width: 500px;

  height: 300px;

  border: 1px solid gray;

}

Результат ниже на скриншоте.

Способ 1. Добавляем картинке класс .image-center.

Способ заключается в том чтобы картинке добавить свойство display со значением block и так же правило margin:auto. Возможно вам уже знакома эта техника и вы ее использовали для центрирования div. Но так как изображение является строчным элементом нам необходимо добавить display:block.

<div> <img src=»http://placehold.it/350×150″> </div>

<div>

   <img src=»http://placehold.it/350×150″>

</div>

.image-center { display:block; margin: auto; }

.image-center {

  display:block;

  margin: auto;

}

На скриншоте вы можете увидеть, что изображение отцентрировано.

Способ 2. Копируем html код который есть на данный момент, и диву image-wrap добавим еще класс image-align. А класс .image-center удалим.

Эта техника заключается в том, чтобы содержимое дива отцентрировать с помощью text-align : center. Стоить помнить, если мы добавим текст в див он тоже будет центрироваться вместе с картинкой.

<div> <img src=»http://placehold.it/350×150″> </div>

<div>

  <img src=»http://placehold.it/350×150″>

</div>

.image-align { text-align: center; }

.image-align {

  text-align: center;

}

Смотрим результат.

Способ 3. Техника основывается на свойстве display : flex. Берем код html который использовали в способе 2 и меняем в нем класс image-align на image-flex.

<div > <img src=»http://placehold.it/350×150″ > </div>

<div >

  <img src=»http://placehold.it/350×150″ >

</div>

Классу image-flex в css пишем:

.image-flex { display:flex; align-items: center; justify-content: center; }

.image-flex {

  display:flex;

  align-items: center;

  justify-content: center;

}

Свойство align-items центрирует изображение по вертикали, justify-content по горизонтали. В этом есть главное отличие и плюс от предыдущих способов, мы можем выравнивать картинку по двум осям.

Теперь у вас точно не возникнут вопросы как отцентрировать изображение по центру div. Если у вас есть, что спросить или дополнить, комментарии приветствуются. До встречи в следующих статьях.

comments powered by HyperComments

Выравниваем картинки по центру в HTML

Как выровнять картинки по центру?

Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.

Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.

Способ 1

Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.

HTML

<img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» />

<img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» />

CSS

.center-img { display: block; margin: 0 auto; }

.center-img {

  display: block;

  margin: 0 auto;

}

Кстати, этот способ позволяет выравнивать любые блочные элементы: div, p, заголовки.

И, сразу, посмотрите выравнивание на практике:

See the Pen Выравнивание изображений по центру by Alex (@Asmodey) on CodePen.

Этот способ удобен тем, что мы автоматически переносим изображение на следующую строку (поскольку задали ей display: block), и тем, что мы можем задать отступы от текста сверху и снизу с помощью изменения свойства margin.

Способ выравнивания 2

Второй способ, выравнивания изображения – это помещение картинки в параграф, которому мы присвоим класс. После чего, зададим параграфу выравнивание текста по центру.

HTML

<p> <img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» > </p>

<p>

  <img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение»  >

</p>

CSS

.center-img { text-align: center; }

.center-img {

  text-align: center;

}

И на практике:

See the Pen Выравнивание изображений способ 2 by Alex (@Asmodey) on CodePen.

В данном случае получается код CSS более лаконичным, но HTML содержит больше элементов. Если нравится – используем.

Третий способ

Данный вариант основан на новых семантических тегах HTML5 и его рекомендуется использовать если у вас есть возможность (и необходимость) завернуть картинку в тег figure.

Итак, есть изображение с подписью в теге figure. Поскольку figure — это блочный элемент, то просто задайте ему выравнивание по центру.

HTML

<figure> <img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» > <figcaption>Толстый кот</figcaption> </figure>

<figure>

  <img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение»  >

  <figcaption>Толстый кот</figcaption>

</figure>

CSS

figure { text-align: center; }

figure {

  text-align: center;

}

И на практике

See the Pen figure выравниваем по центру by Alex (@Asmodey) on CodePen.

Вывод: мы рассмотрели три простых способа выровнять изображение по центру HTML страницы с помощью CSS. Если есть вопросы – пишите.

Горизонтальное выравнивание текста, картинок, блоков(div) по центру

В этой статье мы коснемся вопроса выравнивания по центру различных элементов html при помощи css свойств. 

Довольно часто появляется необходимость выровнять div по центру или выровнять его содержимое. Существует несколько способов это сделать. Некоторые способы подходят для выравнивания текста, картинок и другого, но не подходят для выравнивания блоков.

Для начала рассмотрим варианты для выравнивания содержимого блоков, такое как изображения, текст. Этот метод подходит почти ко всем элементам.

В этом случае все просто — для родительского элемента задаем свойство text-align со значением center. Такой способ выровнять текст по центру при помощи css самый простой и удобный. Для более глубокого понимания приведу пример. Важно осозновать, что в этом случае по центру у нас выравнивается только содержимое.

HTML-код:

 

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<p>Какой-то текст, выравненный по центру для родительского элемента body</p>
		<img src="/images/1386.jpg" alt="Улыбка" />
	</body>
</html>

 

CSS-код:

 

body {text-align:center;} /*выравниваем содержимое body по центру*/

 

 

С самым простым — выравниванием текста и изображений при помощи css по центру страницы мы разобрались.

Теперь перейдем к способам выравнивания элементов вроде блочного типа(div, table). В этом случае мы будем выравнивать по центру не содержимое, а сами таблицы, блоки, абзацы.

Всего я предлагаю два варианта при помощи CSS: используя свойство margin и используя свойства position c left. Важно заметить, что ни один из этих способов не будет работать, если у вас не задана фиксированная ширина элемента, не важно в px, % или чем ещё.

Таким образом, первым делом решаем, в каких единицах и какая будет ширина элемента, который мы хотим выровнять по центру.

Выравнивание по центру при помощи margin

Для метода при помощи margin не важно, в процентах или пикселях вы задает эту ширину. Для центрирования по этому методу, вам нужно в качестве значений свойства margin поставить следующие 0 auto. Если более конкретно, то для боковых отступов значение должно быть auto, а для верхнего и нижнего можно задавать любые внешние отступы. Т.е. развернутый вариант значения выглядит так 0 auto 0 auto, либо так 10px auto 5% auto.

Таким образом выставлять внешние отступы для верха и низа элемента можно, а боковые обязательно должны стоять в auto.

Это, пожалуй, наиболее универсальный и удобный способ, чтобы div был выровнен по центру или любой другой элемент.

Далее приводится пример выравнивания при помощи этого метода.

HTML-код:

 

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
	</body>
</html>

 

CSS-код:

 

body {text-align:center;}
div {padding:10px; color:#FFFFFF;}
div.centr { 
	background:#003300; 
	width:300px; /*фиксированная ширина через пиксели*/
	margin:10px auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 10 px*/
}

div.centrall { 
	background:#990000; 
	width:30%; /*фиксированная ширина через проценты*/
	margin:2% auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 2%*/
	text-align:center;
}

 

Выравнивание по центру при помощи position и left

Такой вариант подойдет не для любого элемента.

Во-первых, ширину нужно указывать только в процентах, с пикселями такое не будет работать. Скоро вы поймете, почему так.

Во-вторых, родительскому тэгу должно быть задано свойство position с значением relative/absolute/fixed, любым из перечисленных. 

Теперь нужно так же задать любое из этих значений свойства position для выравниваемого элемента. Потом взять 100 вычесть ширину этого элемента и поделить получившееся число на 2. Получившееся значение и будет тем, которое нужно указать для left (стоит отметить, что это свойство можно заменить на right, как обычно это не существенно). Благодаря таким свойствам нужный div или таблица будут размещены по центру родительского элемента.

Как это работа? Свойство position тут нужно, чтобы свойство left отсчитывалось от левой границы родительского элемента не экрана, хотя иногда подходит вариант с отсутствием заданного свойства position для родителя. После чего мы просто задаем такое значение свойству left, чтобы левая граница размещалась на половине ширины от всей ширины родительского элемента за вычетом ширины самого блока.

Посмотрите сами, как это работает.

HTML-код:

 

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
	</body>
</html>

 

CSS-код:

 

body {position:relative;}
div {padding:10px; color:#FFFFFF; position:relative;}

div.centrall { 
	background:#990000; 
	width:20%; /*фиксированная ширина через проценты*/
	text-align:center;
	left:40%; /*отступ от левого края родительского элемента*/
}

 

Выравнивание рисунка по центру — Visio

В Visio вы можете центрировать фигуры на странице документа.

Центрирование фигур на странице документа

  1. Выделите в документе фигуры, которые нужно выровнять по центру. Для этого выполните указанные ниже действия.

    • Перетащите рамка выделения вокруг всех фигур, которые вы хотите выровнять по центру.

    • Удерживая нажатой клавишу SHIFT, щелкните все фигуры, которые вы хотите выровнять по центру.

  2. На вкладке Главная нажмите кнопку Выровнять > Выровнять по центру.

Центрирование страницы документа на бумаге принтера

  1. На вкладке конструктор нажмите кнопку вызова диалогового окна рядом с пунктомПараметры страницы.

  2. На вкладке Настройка печати в группе Масштаб печатинажмите кнопку вписать в, а затем введите 1 на листах и в поля листа (s) сверху и снизу

  3. На вкладке Параметры печати нажмите кнопку Настройка.

  4. В разделе малые рисункиустановите флажок Центрировать по горизонтали , флажок в центре по вертикали или оба, а затем дважды нажмите кнопку ОК .

  5. Чтобы предварительно просмотреть документ, который будет отображаться на распечатанной странице, в меню файл выберите команду Печать.

В Visio вы можете центрировать фигуры на странице документа.

Центрирование фигур на странице документа

  1. Выделите фигуру в документе или выделите несколько фигур, выполнив указанные ниже действия.

    • Перетащите рамка выделения вокруг всех фигур, которые вы хотите выровнять по центру.

    • Удерживая нажатой клавишу SHIFT, щелкните все фигуры, которые вы хотите выровнять по центру.

  2. На вкладке Главная нажмите кнопку позиция > Выровнять по центру.

Центрирование страницы документа на бумаге принтера

  1. На вкладке конструктор нажмите кнопку вызова диалогового окна рядом с пунктомПараметры страницы.

  2. На вкладке Настройка печати в группе Масштаб печатинажмите кнопку вписать в, а затем введите 1 на листах и в поля листа (s) сверху и снизу

  3. На вкладке Параметры печати нажмите кнопку Настройка.

  4. В разделе малые рисункиустановите флажок Центрировать по горизонтали , флажок в центре по вертикали или оба, а затем дважды нажмите кнопку ОК .

  5. Чтобы предварительно просмотреть документ, который будет отображаться на распечатанной странице, в меню файл выберите команду Печать > Предварительный просмотр.

В Microsoft Office Visio 2007 вы можете центрировать весь документ на странице документа или только выделенные фигуры.

Выравнивание рисунка по центру на странице документа

В меню фигура выберите пункт центрировать документ.

Центрирование фигур на странице документа

Центрирование фигур на странице документа включает в себя удаление фигур, изменение масштаба, а затем вставка фигур обратно на страницу документа.

  1. Щелкните инструмент указатель Изображение кнопки , а затем выделите фигуры, которые вы хотите выровнять по центру, и выполните одно из указанных ниже действий.

    • Перетащите рамка выделения вокруг всех фигур, которые вы хотите выровнять по центру.

    • Удерживая нажатой клавишу SHIFT, щелкните все фигуры, которые вы хотите выровнять по центру.

  2. В меню Правка выберите команду Вырезатьили нажмите клавиши CTRL + X.

  3. Выполните одно из указанных ниже действий.

    • На стандартной панели инструментов щелкните стрелку рядом с полем Изображение кнопки » масштаб «, а затем выберите пункт страница.

    • В меню вид наведите указатель на пункт масштаби выберите пункт вся страница.

  4. В меню Правка выберите команду Вставитьили нажмите клавиши CTRL + V.

Центрирование страницы документа на бумаге принтера

  1. В меню Файл выберите пункт Параметры страницы.

  2. Откройте вкладку Настройка печати и в разделе Масштаб печативыберите вписать в, а затем введите 1 на листах и в поля листа (s) сверху и снизу

  3. На вкладке Настройка печати в группе Бумага принтера нажмите кнопку Настройка.

  4. В разделе малые рисункиустановите флажок Центрировать по горизонтали , а затем — по центру флажок «по вертикали «.

    x или и то, и другое, а затем дважды нажмите кнопку ОК .

  5. Чтобы предварительно просмотреть документ, который будет отображаться на распечатанной странице, в меню файл выберите команду Предварительный просмотр.

    Small drawing positioned in different parts of a printed page

    Небольшой центр рисования по горизонтали, по вертикали и оба.

Как выровнять картинку по вертикали средствами CSS

Рассмотрим, как правильно выровнять картинку по вертикали на странице

Итак, у нас есть картинка и есть блок div. Как выровнять картинку по вертикали?

1. Нам не известны ни размеры картинки, ни размеры блока

Вариант 1. Картинка с абсолютным позиционированием

Верстка такая:

1
2
3

<div>
    <img src="smile.gif" alt="" >
</div>

Стили:

1
2
3
4
5
6
7
8
9
10
11
12

.outer {
    height: 100px;
    position: relative;
}
.outer img {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }

Height введен только чтобы расширить блок, он может быть динамическим, и картинка всегда будет по центру.

Пример:

Вариант 2. Через table-cell

Верстка как и в первом примере:

1
2
3

<div>
   <img src="smile.gif" alt="" >
</div>

Стили:

1
2
3
4
5
6
7

.outer1 {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   width: 500px;
   height: 100px;
}

Здесь тоже высота может быть динамической. Но есть одно НО – ширину блока уже нельзя указать в 100%, должен быть задан width.

Пример:

2. Нам известна высота блока, но не известна высота картинки

Способ через line-height. Высота картинки должна быть меньше высоты блока.

Верстка:

1
2
3

<div>
    <img src="smile.gif" alt="" >
</div>

Стили:

1
2
3
4
5
6
7
8

.outer2 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.outer2 img {
    vertical-align: middle;
}
Пример:

Нам известна высота картинки, но неизвестна высота блока

Способ через абсолютное позиционирование картинки

Суть этого способа заключается в добавлении картинке position: absolute, отодвигании ее сверху на 50% через свойство top, а потом добавлении отрицательного margin, равного половине высоты этой картинки. Также можно выравнивать картинку и по горизонтали (добавлением свойств top: 50% и margin-top, равного половине ширины картинки).
Верстка:

1
2

<div>
    <img src="http://ktvd.ru/wp-content/uploads/smile.gif" alt=""> </div>

Стили:

1
2
3
4
5
6
7
8
9
10
11
12

.outer4 {
    position: relative;
    border: 1px solid aqua;
    width: 100%;
    height: 100px;
} 
.outer4 img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -20px;
Пример:
HTML, CSS

Выравнивание в фотошопе по центру и краям

В фотошопе есть инструмент Перемещение, который позволяет автоматически со сто процентной точностью выровнять любой объект/слой по центру изображения или его краям. Также можно выровнять относительно отдельно взятого участка на изображении. Все это очень просто и об этом пойдет речь в данной статье.

Как правило, новички эту операцию делают на глаз, что совсем не обязательно. Выберите инструмент Перемещение и обратите внимание на его панель параметров. Там имеется ряд настроек, которые и отвечают за эту задачу (смотрите на скриншоте):

Первые три кнопки отвечают за выравнивание по вертикали (слева направо): по верхнему краю, по центру, по нижнему краю.

Следующие три кнопки отвечают за горизонтальное выравнивание (слева направо): по левому краю, по центру, по правому краю.

Таким образом, чтобы разместить объект ровно по центру, нужно выбрать центрирование по вертикали и горизонтали. 

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

В этом и кроется секрет того, как сделать объект посередине всего изображения или его отдельного фрагмента.

Итак, последовательность действий следующая:

Допустим, нужно разместить по центру эту картинку:

Вариант 1 — относительно всего холста.

Шаг 1

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

На палитре слоев выделяем фоновый слой и жмем на клавиатуре комбинацию клавиш Ctrl+A (Выделить все). В результате вы должны увидеть рамку выделения из «марширующих муравьев» вокруг фонового слоя. (Как правило, фоновый слой — совпадает по размерам с холстом).

Примечание

Можно выделить фоновый слой еще другим способом — зажмите клавишу Ctrl и щелкните левой кнопкой мыши по фоновому слою. Способ работает, когда этот слой разблокирован (об этом сигнализирует значок замочка, подробнее).

Шаг 2 

Теперь нужно выбрать инструмент Перемещение. Когда у нас есть рамка выделения, то кнопки выравнивания станут активными, а значит их можно использовать.

Выберите слой с картинкой, которую нужно выравнивать, а теперь нажимайте на кнопки в соответствии с тем, куда бы вам хотелось разместить эту картинку. Например, давайте разместим ровно по центру. Тогда нам нужно нажать вот эти кнопки:

Еще пример. Допустим, нужно разместить картинку по центру, но с левого края. Тогда на панели параметров выбираем такие кнопки:

Вариант 2 — в отдельно взятом фрагменте изображения

Допустим, на изображении присутствует фрагмент, внутри которого нужно идеально ровно разместить какую-нибудь картинку. В своем примере я добавил стеклянный квадрат. Пусть внутри него будет находиться другая картинка (кстати, в этой статье можно научиться самому делать такой стеклянный квадрат).

Шаг 1

Первым делом, по аналогии с первым вариантом, необходимо выделить этот фрагмент. Как этот сделать?

— Если этот фрагмент находится на отдельном слое (как у меня квадрат, который я отдельно вставил), то нужно нажать Ctrl и кликнуть мышью по миниатюре слоя, если он не заблокирован).

— Если этот фрагмент находится в самом изображении, то нужно выбрать инструменты выделения Прямоугольная и Овальная области и с их помощью нарисовать вокруг фрагмента ровную выделенную область. Как пользоваться этими инструментами смотрите тут.

Шаг 2 

Выберите слой с картинкой и выберите кнопки как бы вы хотели эту картинку разместить. Например по центру:

Совет

В некоторых случаях требуется вручную немного скорректировать местоположение картинки. Выберите инструмент Перемещение и, зажав клавишу Shift, нажимате на стрелки направлений на клавиатуре. Картинка будет двигаться с шагом в 10 пикселей.

Если не зажимать эту клавишу, а просто пользоваться стрелками клавиатуры, то картинка будет двигаться с шагом в 1 пиксель.