Как сделать выравнивание картинки по центру в css?
2 ответа
от
fredy ,
3 года назад
@nicola Сделать выравнивание картинки по центру в CSS можно следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> p { text-align: center; } </style> </head> <body> <p><img src="image/11.jpeg" /></p> </body> </html> |
от
caterina ,
год назад
@nicola
Чтобы выровнять картинку по центру, можно использовать следующие стили:
1 2 3 4 5 |
img {
display: block; /* чтобы можно было задать отступы */
margin: auto; /* выравнивание по горизонтали */
text-align: center; /* выравнивание по вертикали, работает только для inline-элементов */
}
|
Если картинка является фоном элемента, то можно использовать свойства background-position и background-size:
1 2 3 4 5 |
.element {
background-image: url('image.jpg');
background-position: center;
background-size: contain;
}
|
В этом примере картинка будет расположена по центру элемента и будет подстроена под размер элемента с сохранением пропорций.
15