Выравнивание картинки по центру 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, задать абзадцу свойство
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 вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием
На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в 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 удалим.
Эта техника заключается в том, чтобы содержимое дива отцентрировать с помощью
<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. Если есть вопросы – пишите.
Выравнивание картинок | WebReference
В зависимости от положения изображения различают разные способы их выравнивания. Так, рисунок может выравниваться по правому или левому краю окна браузера или, если он встраивается непосредственно в текстовую строку, по базовой линии текста.
Обтекание изображения текстом
Выравнивание изображения с одновременным обтеканием его текстом — один из популярных приёмов вёрстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с разных сторон. Для создания обтекания изображения текстом существует несколько способов, самый удобный, конечно же, связан с применением стилей.
Для обтекания картинки текстом применяется стилевое свойство float. Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float, обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.
Пример 1. Применение float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
<style>
figcaption {
text-align: center;
}
.left {
float: left; /* Выравнивание по левому краю */
margin: 0 1em 1em 0; /* Отступ справа и снизу */
}
.right{
float: right; /* Выравнивание по правому краю */
margin: 0 0 1em 1em; /* Отступ снизу и слева */
}
</style>
</head>
<body>
<figure>
<img src="image/fig.jpg" alt="">
<figcaption>Подпись снизу</figcaption>
</figure>
<p>Текст</p>
</body>
</html>В данном примере вводится два класса с именами left и right, добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin. На рис. 1 показано выравнивание по левому краю.
Рис. 1. Выравнивание фотографии по левому краю
Выравнивание рисунка относительно текста
Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align. По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).
Рис. 2. Базовая линия
Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).
Рис. 3. Картинка, выровненная по базовой линии текста
В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle.
Пример 2. Выравнивание картинки относительно текста
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
<style>
p img {
vertical-align: middle;
}
</style>
</head>
<body>
<p>Вид самой кривой изменяется с помощью
инструмента карандаш <img src="image/pen.png" alt="">.
Для создания прямых отрезков устанавливайте точки удерживая
клавишу Shift.
</p>
</body>
</html>Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.
Рис. 4. Картинка, выровненная по середине текста
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Горизонтальное выравнивание текста, картинок, блоков(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%; /*отступ от левого края родительского элемента*/
}
Как выровнять картинку по вертикали на CSS
Давайте подробно разберем, как правильно выровнять изображение или картинку по вертикали на странице, где все будет исполнено при помощи CSS. Картинки ли изображение изначально включаются на ваш сайт различными способами, но примерно с помощью стилистики CSS. Они могут быть выровнены и поплыли, чтобы изображения, которые будут размещены в определенном месте на странице.От того, как вы хотите видеть картинку, и здесь будет последствие, чтоб выравнять ее и сделать корректно. При выравнивании картинок или элемента будет располагаться только влево, вправо, а также по центру с текстом, который следует до и после изображения.
Выравнивание оставляет довольно много пустого пространства на вашем сайте. Вы увидите пустое пространство, когда вы пройдете через секцию выравнивания. Для этого нам нужно изображение и блок div, для того, чтоб выровнять картинку по вертикали.
Первое, это нам не известны ни реальные размеры как изображение, так и размеры блока.
Вариант 1. Изображение с абсолютным позиционированием
HTML
Код
<div>
<img src=»http://zornet.ru/sml/treeswing.gif» alt=»» >
</div>
CSS
Код
.kartinku-vertikali {
height: 100px;
position: relative;
}
.kartinku-vertikali img {
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Здесь нужно добавить, что Height был поставлен для расширение блока, так как он может быть динамическим, где изображение всегда будет по центру
Пример:1
Вариант 2. Где задействуем table-cell
Верстка идет в аналогичном примере под номер один:
HTML
Код
<div>
<img src=»http://zornet.ru/sml/35.gif» alt=»Через table-cell» >
</div>
CSS
Код
.kartinku-vertikali {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 100px;
}
В аналогичном порядке высота может быть динамической. Но также здесь присутствует одно НО – это безусловно ширину блока, где уже нельзя указать на 100%, она должна быть задана width.
Пример:1.1
2. Здесь уже известна высота блока, но не известна высота изображения
Здесь пригодится вариант, где все можно исполнить через line-height, где изначальная высота снимка должна быть меньше высоты основного блока.
HTML
Код
<div>
<img src=»http://zornet.ru/sml/6.gif» alt=»Позиционирование картинки» >
</div>
CSS
Код
.vestnav-usotoka {
height: 100px;
line-height: 100px;
text-align: center;
}
.vestnav-usotoka img {
vertical-align: middle;
}
Вот и все, осталось посмотреть пример, как все выглядит.
Пример:2
Также можно посмотреть распространенный способ через абсолютное позиционирование изображения.
Здесь все заключается в прописывание изображение position: absolute, что автоматически происходит отступ ее сверху на 50% через всем известное свойство top, с последствием выставления отрицательного margin, которое автоматически делает равным половине высоты поставленного изображение.
Аналогично можно применить при выравнивать разных картинок в горизонтальном виде, где просто прописываем свойств top: 50% и margin-top, что как уже было сказано, это идет ровно половине ширины изображения.
HTML
Код
<div>
<img src=»http://zornet.ru/sml/9.gif» alt=»Выравнивать картинку»> </div>
CSS
Код
.polodsen-svuketun {
position: relative;
border: 1px solid #09b3b3;
width: 100%;
height: 100px;
}
.polodsen-svuketun img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -23px;
margin-left: -20px;
}
Это пример посмотрим на demo страницы, чтоб вообще понимать, как правильно выравнивать изображение по вертикали при помощи HTML И CSS.
Свойство CSS обычно используется для поворота и масштабирования элементов, но с его функцией теперь мы можем вертикально выравнивать элементы. Обычно это должно быть сделано с абсолютным позиционированием или установкой высоты строки.
Демонстрация
Как выровнять картинку по вертикали средствами 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; |