https://blog.hubspot.com/website/center-an-image-in-html#how-to-horizontally-center-an-image-in-css
-=-=-
Method 1. Using the Text-Align Property
To center an image horizontally, I can use the CSS text-align property. Since this property only works on block-level elements and not inline elements, I’ll need to wrap the image in a block element.
how to center an image in css, text align
Here's how:
I start by opening up my HTML file.
I then locate the image on the page, identifiable by its tag.
I wrap the image in a div.
From there, I can add a style declaration to the opening tag of your div, i.e.,
In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the text align property to center the image below.
This is the simplest but most limited method: it only works if the image is smaller than the viewport.
-=-=- CSS body { margin: auto; width: 640px; padding: 50px; font-family: 'Arial', sans-serif; color: #33475b; } img{ padding: 10px; }