Aligning Image to the center of the page(without any container).

We usually use  text-align CSS property on the container to set the alignment of the child elements. So in case of <img> tag we can take help of a block container element e.g div or span(the span must have display:block as its style) in the following way:

<div style="text-align:center">
<img src="1.jpg">
</div>

But the code seems redundant because we need only to center the image and for that we need a container!!!

There is a way out…

You can simply use 2 CSS attributes i.e display and margin. Below there is the syntax:

<img src="1.jpg" style="display:block; margin:auto;">

Advertisements