Having Trouble Centering an Image? Here's How

October 01, 2024October 01, 2024

Center an Image in the Content Editor

Whenever you're working in a system Content Editor (like the one pictured below), from time to time you may come across the problem of an image not responding when you set it to be centered (or right-aligned). Usually this happens if you don't set the centering right after loading the image into the module (see Best Practices below).

Here is how you can set an image to center any time you need using our Responsive system.

Please Note: For best results, Firefox is the best browser to use when working with our current Content Editor. In Chrome you may have trouble selecting and working with content.

  1. Click on the image to highlight it.

  2. Click to Insert/Edit the image (either click the Photo button at the top or right-click on the image and choose Insert/Edit Image).

  3. Go to the Advanced tab.

  4. Enter the following text in the Style field (see image below):

     display: block; margin-left: auto; margin-right: auto;

  1. Enter the word 'auto' in the Horizontal field, as pictured in the example below.

ci.jpg

  1. Click Ok. You will see your image centered in the Editor. Click to Save the module to finalize the update.

ci 2.jpg

Here are some helpful Best Practices for working with images in our system:

  • Always use the best formats: JPG and PNG
  • Never enlarge an image larger than its original size - the image will become pixelated and will look 'fuzzy'.
  • If you need to center an image, make sure you do so immediately after loading it into the Editor. If you load the image, then do something else (like enter some text), the source code might have locked the image as left-aligned, and then you would need to use the above steps to make the image centered.
  • In the Insert/Edit Image window (pictured above), on the General tab, be sure to enter Alternative Text for the image! THIS IS EXTREMELY IMPORTANT! Just a few words that describe the photo are all that is needed. Providing this info for each image you put in one of the Content Editor areas gives the search engines keywords they can use to index the image, increasing your search relevancy. This is part of doing good SEO (Search Engine Optimization) for your site: not doing it counts against you, while doing it counts for you.