HomeХобби и стильRelated VideosMore From: Internet Services and Social Networks Tutorials from HowTech

How to Align Image in HTML

105 ratings | 39176 views
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.
Html code for embedding videos on your blog
Text Comments (12)
Phillip Joshua Ulip (5 months ago)
Thanks men it's really helpful for newbie programmer students like me
LeagueOfBaCHiS (1 year ago)
thanks mane i appriciate you
Music Is Life (1 year ago)
how can we put the photo to corner?
ManavK (1 year ago)
<img src=example.jpg align=right>
great video!!
PSHARMA (1 year ago)
Nitesh Singh (2 years ago)
Thank you very much ! IT HELPED ME A LOT
PapaDoge (2 years ago)
This is Text Align. Didnt help at all!
Dósa Norbert (3 years ago)
Artur K (4 years ago)
okay so tell me how to make padding from the picture to text?did need to make new class?
Shakaama (5 years ago)
I think you need to go over what you're saying. You made several mistakes. It's not a big deal, because I know what you meant, but I'm a designer.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.