Howtojetro.blogspot.com | How to Center an Image Using HTML Programming - A Web page coder uses Hypertext Markup Language to tell the Web browser the functional purpose of each element on a page, such as a paragraph, heading or list. Since HTML 4, Cascading Style Sheets have provided the coder with a way to tell the browser how each of those elements should look, separate from defining what they are. A page can have different CSS styles for different types of devices, such as mobile phones and desktop computers, allowing the page appearance to change without the coder needing to change the HTML. Use CSS properties to center an image.
Instructions
1. Place the "img" tag in the HTML file where you want your image to display on the Web page. It must be between the "body" tags and after the "h1" tags. For example,
<body>
<h1 style="text-align:center;">This is your text.</h1>
<img src="photo.jpg" alt="A description of the picture" width="270"
height="50" />
</body>
defines an image named photo.jpg that is 170 pixels wide and 50 pixels tall. It is the first thing on the page after the top heading.
2. Use the "margin" CSS attribute to define the space around page elements, such as pictures. The "auto" value for the margin attribute tells the Web browser to automatically determine the amount of space. So, <img src="photo.jpg" alt="A description of the picture" width="170" height="50" style="margin:auto;" /> defines that the space around the image is determined by the browser.
3. Use the "display" property to define how a page element is displayed. The "block" value for the display property tells the Web browser to display the element on its own line, with space above and below it. So, <img src="photo.jpg" alt="A description of the picture" width="170" height="50" style="margin:auto;display:block;" /> defines the same image, but the addition of "display:block;" now places it on its own line.
4. View the Web page in several different browsers to verify that the image is centered properly.
Hope this tips useful to you guys....
No comments:
Post a Comment