Как сделать картинку по центру в css?
2 ответа
от
cristina.schaefer ,
2 года назад
Разместить картинку по центру в 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 ,
год назад
@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> |
Это выровняет картинку по центру внутри контейнера.
15