Лучшее, что я нашел (что, кажется, работает во всех браузерах) для центрирования изображения или любого элемента, по горизонтали - создать класс CSS и включить следующие параметры:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
Затем вы можете применить класс CSS, который вы создали, к вашему тегу следующим образом:
HTML
<img class="center" src="image.jpg" />
Вы также можете встроить CSS в свой элемент (s), выполнив следующее:
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
... но я бы не рекомендовал писать CSS внутри, потому что тогда вам нужно сделать несколько изменений во всех ваших тегах, используя ваш центрирующий CSS-код, если вы когда-либо хотите изменить стиль.