Как сделать картинку по центру в css?

Пользователь

от neal_bergstrom , в категории: HTML/CSS , 3 года назад

Как сделать картинку по центру в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от cristina.schaefer , 3 года назад

Разместить картинку по центру в css, можно так:


HTML:

1
2
3
<body>
    <img class="center" src="image/12.png"></p>
</body>



CSS:

1
2
3
4
5
6
.center{
    display: block;
    margin: auto;
    height: 100px;
    width: 100px;
}

Пользователь

от francis_schuster , 2 года назад

@neal_bergstrom 

Для того чтобы сделать картинку по центру в CSS, можно использовать свойство "margin: auto".


Пример:

1
2
3
4
img {
    display: block;
    margin: auto;
}


Это свойство задаст автоматическое выравнивание по центру для блочного элемента.


Если же нужно выровнять картинку по центру внутри контейнера с другими свойствами, то можно использовать свойство "text-align: center" для контейнера и "display: inline-block" для картинки.

1
2
3
4
5
6
.container {
  text-align: center;
}
img {
  display: inline-block;
}


И добавить в HTML код:

1
2
3
<div class="container">
  <img src="image.jpg" alt="my image">
</div>


Это выровняет картинку по центру внутри контейнера.