Office of Web Services
How do I align an image around text?

Images can be placed either before or after your text has been added.

Click inside the content region where you would like the image to be placed. For example, if you would like the image to be inline with the top of the text, you will place your cursor before the first sentence.

Choose the "Insert/Edit Image" icon screen shot of image button from the WYSIWYG editor.

The insert image window provides an internal images tab and an external images tab. We are going to insert an image that is already in Cascade. You can also upload images to Cascade during the insert image process.

In the pop-up window, choose the file you want to insert (this will bring up another pop-up window). Once you have selected a file, choose "confirm" and return to the Insert/Edit Image pop-up window.

In this window, you need to type the alternate text for that image then choose the image placement.

The "Alignment" is where that image will appear in relation to the text, not vice versa. Sometimes it is easy to get that confused. You may want to play with this a little to understand the difference between "middle" and "absolute middle." For the most part, you will be using "left" or "right."

Image Alignment

Do not adjust the "Width/Height." You should only import images in the true size that you want them on the Web page.

"Border Width" lets you place a border on the image. The number you place in this box indicates the width of the black border in pixels. One or two pixels will be sufficient for most images you insert. 

"Vertical Spacing" and "Horizontal Spacing" allow you to add some padding around the image so the text does not bump right up against the image. This is a # representing pixels as well. We recommend putting 7-10 pixels in the window. This will give you adequate white space on either side of the image.

Alignment and spacing

Finally, don't forget to "Insert" the image. 

Sample without spacing:
President Jim BarkerClemson is well positioned - perhaps uniquely positioned - to reinvent the research university and address the issues facing higher education in the 21st century.


Sample with 3 px Vertical and 7 px Horizontal spacing:
President Jim BarkerClemson is well positioned - perhaps uniquely positioned - to reinvent the research university and address the issues facing higher education in the 21st century.