Tag Archives: img

Aligning images to left, right and center

In this tutorial, we will look at how to align images using HTML5 and CSS. There is an align attribute for the img tag, however this is not compatible with HTML5 so we will look at aligning images using CSS instead.

Aligning to left or right

If you want to align an image to the left or right, then use the float property (explained in another tutorial here). If you want to align an image to the middle of a page, then read on…

Aligning to middle

If you want to align an image to the middle of a page, then you can use the CSS vertical-align property. You could use it in inline CSS code or in a stylesheet. To align an image to the middle of the page, you give the vertical-align property a value of middle.

If you use the vertical-align property using inline CSS, then it might look like this:

<img src="myimage.png" vertical-align="middle">

If you use the vertical-align property in a stylesheet, then  you might apply the vertical-align property to the img tag or you could give the image a class or ID and then apply the vertical-align property to that class/ID. In a stylesheet, your code might look like this:

img{
   vertical-align: middle;
}