How to Align Images with JCE in Joomla

JCE Editor^[1] 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:

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

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

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

Insert an image aligned to the right

• Click the "Insert/Edit image" icon:

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

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

Insert an image aligned to the center

• Click the "Insert/Edit image" icon.

1. Select the image.
2. Choose Alignment: "centre"

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

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

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

The margin adds a spacing around the image.