Приветствуй вас на сайте Impuls-Web!
Довольно часто, при верстке сайтов веб-разработчик сталкивается с необходимостью выравнивания изображений по центру. И если для опытного разработчика это не является проблемой, то у начинающего это может вызвать некоторые трудности.
Навигация по статье:
Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.
Выравнивание картинки HTML
Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <style> .pic { text-align: center; /* Выравнивания картинки по центру в html */ } </style> </head> <body> <p class="pic"><img src="images/img.jpg" width="250" height="150" alt="pic"></p> </body> </html> |
Или же можно сделать еще проще и добавить в тег <img> атрибут style:
|
1 |
<p style="text-align: center;"><img src="images/horx.jpg" alt="img" width="394" height="286" /></p> |
Выравнивание картинки по центру CCS
В случае если у вас есть несколько изображений, которые нужно выровнять по центру, то лучше подойдёт выравнивание картинок по центру путём внесения правок в файл CSS-стилей страницы или сайта. Для этого нужно присвоить изображению класс и дописать показанные ниже css-свойства.
HTML:
|
1 |
<img class="center-pic" srcimages/mokup.jpg" alt="img" width="394" height="286" /> |
CSS:
|
1 2 3 4 |
.center-pic{ display:block; margin:auto; } |
Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:
|
1 2 3 4 |
.conteiner img{ display:block; margin:auto; } |
Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.
HTML:
|
1 |
<p class="center-pic"><img src="//impuls-web.ru/wp-content/uploads/2017/06/mokup-horex.jpg" alt="img" width="394" height="286" /></p> |
CSS:
|
1 2 3 |
.center-pic{ text-align:center; } |
С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.
На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.
Не забывайте делиться статьей в социальных сетях и оставлять комментарии, а так же заходите на мой канал на YouTube, где вы найдете много интересных видео по разработке сайтов, обзору полезных плагинов и скриптов.
Желаю вам успехов в создании своего сайта! До встречи в следующей статье!
С уважением Юлия Гусарь
Спасибо, пригодилось в оформлении статьи!
спасибо очень полезно
нашёл что искал +