How to align a HTML image to the center

Positioning and aligning images on an HTML page is crucial to layout the page. One of the most common questions is how to align an image to the center of a section. In this article we’re going to discuss many possible ways of placing images to the center.

I applied a thin grey border to the wrapping sections to make them visible.

See the online demos and the source codes below. You can also open the developer tools of your web browser and inspect the elements.

In a paragraph

In the first example I’m going to present you how to position an image to the center of a container element, like a div, a paragraph or any other tag.

<p class="aligncenter">
    <img src="image.jpg" alt="centered image" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

I used the text-align: center; CSS property to do the job. If you are familiar with the CSS code then this shouldn’t need more explanation.

With margins

We can assign margin: auto; style to a block element to center it. But we know that image tags are inline, not block elements so we have to assign a display: block; CSS style to make it work.

<div>
    <img class="marginauto" src="image.jpg" alt="centered image" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

<center> tag

The <center> tag is obsolete which means that it’s no longer supported in HTML5 but it’s still supported by the web browsers like Google Chrome.
This used to be a preferred method because it didn’t require style sheets, but plain HTML only.
I don’t want to use outdated elements in my article so I’m not including a demo for this example.

<center>
    <img src="/image.jpg" alt="centered image" />
</center>

align=middle tag attribute

Another obsolete method which didn’t require CSS, similar to the previous example. In older versions of HTML we could center an image assigning the align=“middle” tag attribute.

<img align="middle" src="image.jpg" alt="myimage" />

Align an image center vertically

We have discussed above how to align an image horizontally but there might be cases when you need to center it vertically.
To accomplish this we have to take two steps. The wrapping element needs to be displayed as table cell and the vertical-align has to be set to middle. In my example I’m setting a fixed height to the container to make sure it’s higher than our picture.

<div class="verticalcenter">
    <img src="image.jpg" alt="centered image" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

Both horizontal and vertical centering

We can combine the horizontal and vertical alignment as demonstrated below.

<div class="verticalhorizontal">
    <img src="image.jpg" alt="centered image" />
</div>

<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

I hope you’ve learned today something new reading this article and you are going to use them in your upcoming templates and designs.

Be a tech-savvy web developer/designer by migrating your web development/designing environment into the cloud to access it remotely from anywhere on any device(PC/Mac/android/iOS) with high performance hosted citrix xendesktop from CloudDesktopOnline at an affordable xendesktop cost. If you`re looking for a reliable cloud platform to fulfill your needs, Try out Azure managed services from Apps4Rent with 24*7*365 live tech-support.