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

Aligning Images Using CSS

Image alignment refers to the actual location of the image in relation to text or other images on the web page. Adjusting the alignment of an image allows you to control the amount of white space between the image and surrounding text or other images, thus creating a more visually appealing web design. Image alignment specifications can be individually customized using a Cascading Style Sheet (CSS). This page will explain how to create a Cascading Style Sheet that will allow you to customize an image's alignment.

NOTE: For information on how to insert and make adjustments to the image itself, refer to Working with Images.

return to topAdjusting Image Alignment: Using the Tag Selector

Using the Tag selector to adjust an image's alignment attributes will allow for these settings to be applied uniformly to every image on the page. These instructions use the example of an image which will float right and have a specified margin around it.

  1. In the CSS Styles pane, click NEW CSS RULEnew style sheet
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box: img

  2. For Selector Type, select Tag

  3. From the Tag pull-down list, select img

  4. To create an external CSS file (.css), for Define in, select (New Style Sheet File)
    To create an internal or embedded style sheet, select This document only
    NOTES:
    You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Attaching Style Sheets.
    An embedded style sheet is located in the <head> section of the document it was created for. The style settings for that style sheet apply only to that document.

  5. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box for Box

  6. Under Category, select Box
    The Box options appear.

  7. From the Float pull-down box, make the appropriate selection
    EXAMPLE: Select right
    Text, layers, and tables will float to the left of the image.

  8. Under Margin, deselect Same for all

  9. Under Margin, in the Right text box, type a desired value amount
    EXAMPLE: Type 0

  10. Under Margin, in the Top, Bottom, and Left text boxes, type a value
    EXAMPLE: Type 5
    This specifies that 5 pixels will separate the image's borders from elements on the top, bottom, and left of it.

  11. Click OK

return to topAdjusting Image Alignment: Using the Class Selector

Using the Class selector to adjust an image's alignment attributes will allow settings to be applied to any selected image on the page. Once a class style has been created, it is selected from the Class pull-down list in the Properties pane. These instructions use the example of an image which will float right and have a specified margin around it.

  1. In the CSS Styles pane, click NEW CSS RULEnew style sheet
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box: Class

  2. For Selector Type, select Class

  3. In the Name text box, type a descriptive name that will make clear the function/purpose of this class style
    NOTE: All class style names must begin with a period (.).
    EXAMPLE: Type .pic

  4. To create an external CSS file (.css), for Define in, select New Style Sheet File
    To create an internal or embedded style sheet, select This document only
    NOTES:
    You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Attaching Style Sheets.
    An embedded style sheet is located in the <head> section of the document it was created for. The style settings for that style sheet apply only to that document.

  5. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box: Box

  6. Under Category, select Box
    The Box options appear.

  7. From the Float pull-down list, make the appropriate selection
    EXAMPLE: Select right
    Text, layers, and tables will float to the left of the image.

  8. Under Margin, deselect Same for all

  9. In the Right text box, type a desired value amount
    EXAMPLE: Type 0

  10. In the Top, Bottom, and Left text boxes, type a value
    EXAMPLE: Type 5
    This specifies that 5 pixels will separate the image's borders from elements on the top, bottom, and left of it.

  11. Click OK

Excellence. Our Measure. Our Motto. Our Goal.