How to Align Images with JCE in Joomla

| Joomla
How to Align Images with JCE in Joomla

JCE Editor provides many extra features for Joomla users, including the ability to create tables, insert images, style the text and much more.

Image alignment is easy with JCE, and this is one of the reasons why I like using this editor.

In this post, I'll share with you how to align images with JCE Editor.

Insert an image aligned to the left

While editing an article or a Custom HTML module:

  • Click the "Insert/Edit image" icon:

The Insert/Edit image icon in JCE Editor

  1. Select the image.
  2. Choose Alignment: "left".
  3. Uncheck the Equal Values box.
  4. Type a custom value for Right Margin.

Aligning an image in JCE Editor

  • Click "Insert" button when you're done.

We defined a custom margin on the right to add spacing between image and text.

An image with custom margins in JCE Editor

Insert an image aligned to the right

  • Click the "Insert/Edit image" icon:

The insert image button in JCE Editor

  1. Select the image.
  2. Choose Alignment: "right"
  3. Uncheck the Equal Values box
  4. Type a custom value for Left Margin

Aligning an image to the right in JCE Editor

  • Click "Insert" button.

Similar to previous example, the custom margin on the left adds spacing between image and text.

An image aligned to the right in JCE Editor

Insert an image aligned to the center

  • Click the "Insert/Edit image" icon.
  1. Select the image.
  2. Choose Alignment: "centre"

Aligning an image to the center in JCE Editor

  • Click "Insert" button when you're done.

This is how the image would look in the JCE editor:

An image center aligned in JCE Editor in Joomla

Insert an image and add equal margins

Here's how to add the same margin to the right, top, bottom and left side of an image:

  • Click the "Insert/Edit image" icon.
  1. Select the image and optionally define and aligment.
  2. Keep Equal Values as checked
  3. Type a custom value for Margin

Insert an image and add equal margins in JCE Editor in Joomla

  • Click "Insert" button.

The margin adds a spacing around the image.

Equal margins around an image in JCE Editor


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.