How to Align Image in HTML

HTML By Builder

This tutorial will walk you through the image alignment function of HTML through which you can adjust the image and place it according to your requirements

Don’t forget to check out our site http://howtech.tv/ for more free how-to videos!
http://youtube.com/ithowtovids – our feed
http://www.facebook.com/howtechtv – join us on facebook
https://plus.google.com/103440382717658277879 – our group in Google+

Images are the most important source to create interactive and vibrant web sites. While inserting images into a HTML source code, you need to be very careful with its alignment and spacing on the page. A well placed image adds a great value to a web page while a poorly aligned image can ruin it all. The concept of Image alignment has now devalued in HTML 4 and its onward versions. Web designers are now using CSS for placing images on a web page. A CSS uses a “Float” function to align images in html according to your requirements. Here, we will teach you how to align image in html page using CSS.

Step # 1 — Insert an Image Tag
In this tutorial, we will guide you on how to align image in html. First of all, open up the source code of your HTML page in a text editor. Now enter the following code:
img src = “graph.jpg” /
Here, the “Img” shows the Image tag while the “SRC” denotes the source of the image followed by the Image location.
Once done, save your settings and refresh the HTML page in your browser to load the recently added Image.

Step # 2 — Align the Image to the Left
In the next step, insert the following code within the image tag:
Style = “float: left”
This will align the Image to the Left corner of the HTML page and align the Text to the right corner.

Step # 3 — Align the Image to the Right
In the next step, try to align the image to the right corner of the page. For this purpose, change the Alignment code to “Right” by replacing the “Left”. Save your changes and refresh your browser. You will notice that the image has now been aligned to the right corner of the page.

Step # 4 — Using Different alignments of Image
By using this simple technique, you can align images in the HTML page.

source