How to center align an image in html
Level of difficulty: Easy
Centering an image can be a little more complex than aligning simple text. An image is usually displayed center aligned with the help of text aligning properties, but this is not a very good practice. One should always align an image explicitly. HTML stands for Hyper Text Markup Language. This language is used to create web pages. It is very beneficial to learn html coding as one can easily make personal as well as professional websites using html. One can easily construct web pages using html even without any professional help. If one is well versed with html code then one can easily customize the page settings and alignments comfortably. Html coding is in the form of plain text and there is no extra ordinary coding in html. These files are written in a notepad file generally and stored with the extension of .html or .htm. One needs to center the images in html for making the web page more appealing and well synchronized.
Materials Needed:- For center aligning an image in html one needs the basic knowledge of the html commands and their syntax. The basic programming fundamentals should be clear.
Step 1
The first step is to open the word processor, text editor or simply the notepad file that you wish to use for writing your html code to make your web page. The above mentioned applications can be easily located in the ‘Start’ menu on the desktop. Generally these text editors are provided in the program files menu under the ‘accessories’. These are very easy to use.
Step 2
Then make selection regarding the picture that has to be embedded on the web page. Make sure the picture is saved on your computer at the location known to you. Before embedding the picture one can also reduce or enlarge the size of the picture. The size of the picture is usually reduced so that it takes up less space on the web page, but for doing this an image editing application would be required.
Step 3
In the text editor type, <CENTER><IMG SRC='?'></CENTER>, where ? needs to be replaced by the path of the picture on your computer. You can also simply give the name of the image if it is stored in the same folder as the web page. Your code should look like this: <HTML><HEAD><TITLE>name of the title</TITLE></HEAD><BODY><H1><CENTER><IMG SRC = 'picture.jpg'></CENTER>
Step 4
Open the html file using a web browser and see if the desired positioning has been achieved or not.