October 22, 2011

Controlling the Alignment of a Given Image using HTML

Aside from resizing your image, you can also control the vertical and horizontal alignment of your image with respect to the text using the align attribute. To demonstrate this property, open your text editor and type the next code:
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: