This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Illustrating Image Alignment

This table was developed to help illustrate the different image alignment options available through the Align pull-down list located in the Properties pane when an image has been selected. For all examples, the image insertion point was at the beginning of the paragraph. For more information on the placement and alignment of images, see Placing and Aligning Images.

Default

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, and providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

Top

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, and providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

Middle

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, and providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

Bottom

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

Left

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, and providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

Right

Sample imageImage selection can enhance your page by attracting attention, helping communicate a message, and providing visual relief for a text-intensive page. However, the wrong image or too many images can negatively impact your page. The wrong image may contradict your message or turn off potential readers. Too many images can interfere with your message because the reader does not know where to focus his/her attention or they can greatly increase the load time of the page.

 

Additional Image Alignment Options

These image alignment options are also available under the Align pull-down list which is located in the Properties pane once an image has been selected. Please note that none of these alignment options will validate for XML. If a specific alignment option is necessary for a page, it is suggested that a Cascading Style Sheet (CSS) be used. For more information on how to set alignment options using a Cascading Style Sheet, refer to Placing and Aligning Images Using CSS.

Baseline

This alignment option will align the bottom of a selected image with the baseline of the line text.

TextTop

This alignment option will align the top of the image with the tallest letter in the top line of text.

Absolute Middle

This alignment option will align the middle of the image with the line of text selected.

Absolute Bottom

This alignment option will align the bottom of the image with the bottom most part of the text (e.g. j, g, y) in the bottom line of text.

 

Excellence. Our Measure. Our Motto. Our Goal.