Vertical Alignment
<html> <head> <title>Images</title> </head> <body> <p><a href="header.html"><img src="images/pix.jpg" alt=”pix” align="top" /></a>this is text</p> <p><a href="header.html"><img src="images/pix.jpg" alt=”pix” align="middle" /></a>this is text</p> <p><a href="header.html"><img src="images/pix.jpg" alt=”pix” align="bottom" /></a>this is text</p> </body> </html>
The code will be rendered by the browser this way.
About the code:
- In the attribute align=”top”, the text is aligned to the top of the image.
- In the attribute align=”middle”, the text is aligned with the middle of the image.
- In the attribute align=”bottom”, the text is aligned with the bottom of the image. See the figure on the left.
Horizontal Alignment
With the use of horizontal alignment, you can align the image either to the right or left of the page. When the image is smaller than the current line, the text next to the image will automatically wrap to the next line.
This code…
<html> <head> <title>Images</title> </head> <body> <p><a href="header.html"><img src="images/pix.jpg" alt=”pix” align="left" /></a>this is text</p> <p><a href="header.html"><img src="images/pix.jpg" alt=”pix” align="right" /></a>this is text</p> </body> </html>
…will produce this
About the code:
- In the attribute align=”left”, the image is placed on the left hand side while the text wraps on the right hand side.
- In the attribute align=”right”, the image is placed on the right hand side and the text wraps on the left hand side.
0 comments:
Post a Comment