Technical Training

Centering an image on a page

Images are added to a page using the Add Media button and can be positioned to either allow text to wrap to the left or right of the image. However, there is currently no built-in method of centering the image on the page. Below is a work-around method that should produce the same result. Please send an email to Bill Milhoan if you have any questions.

WHAT YOU WILL DO

  • Use the Add Media button to place an image on the page
  • Use the Image Properties dialog box to adjust the HSpace of the image to move the image closer to the center of the content area of the page

Example

a screen capture from the 1943 B movie, "Mystery of the 13th Guest"

STEP BY STEP PROCEDURE

The image properties box showing the width and H Space text boxes

This process involves some very simple math.

  1. Youwill subtract the displayed width of your image from the size of the container your content is inside of. The display width is either the actual width of the picture or whatever number you set it to inside the Image Properties box.
  2. You will then take the number you got from step one above and divide that by .5.
  3. The resulting number is then entered into the HSpace box in the Image Properties.

The formula looks like this:

  • (width of container - display width of picture) × .5

The width of the container is 596px and I'm displaying the picture at 250px. So…

  • (596 - 250) × .5 = 173

173 is the number I would then enter in the HSpace box in the Image Properties. Voilà!

Now, in actuality, you can just guess at a number for the HSpace. You'd have to keep adjusting the HSace value until it looks right. Just make sure you look at it in display mode - not edit mode. Edit mode makes the editing area much larger than it will actually be displayed.