How to position image in the center/middle both vertically and horizontally
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
Use absolute position. This only works if you know the size of the image. Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image> .
Use margin: 0 auto;text-align: center; and line-height/font-size . This is a bit more tricky, since line-height doesn’t work as it should in IE for inline-block elements like images. That’s where the font-size comes in. Basically, you set the line-height of the image container to the same as the container’s height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.
In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;
Выравниваем картинки по центру в HTML
Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.
Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.
Способ 1
Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.
Выравнивание картинки по центру HTML и CSS
Довольно часто, при верстке сайтов веб-разработчик сталкивается с необходимостью выравнивания изображений по центру. И если для опытного разработчика это не является проблемой, то у начинающего это может вызвать некоторые трудности.
Навигация по статье:
Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.
Выравнивание картинки HTML
Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:
Или же можно сделать еще проще и добавить в тег <img> атрибут style:
Выравнивание картинки по центру CCS
В случае если у вас есть несколько изображений, которые нужно выровнять по центру, то лучше подойдёт выравнивание картинок по центру путём внесения правок в файл CSS-стилей страницы или сайта. Для этого нужно присвоить изображению класс и дописать показанные ниже css-свойства.
Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:
Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.
С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.
На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.
Желаю вам успехов в создании своего сайта! До встречи в следующей статье!