Opened 5 years ago

Closed 4 years ago

Last modified 3 years ago

#8938 closed New Feature (fixed)

Introduce center alignment option for images

Reported by: Frederico Caldeira Knabben Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:


There should be an easy way to center images through the image dialog or by simply clicking the "Align Center" button in the toolbar.

While HTML doesn't specify a way to have images aligned to center, our users may be disappointed for not being able to do so.

The proposed solution is enabling "Align Center" if a selected image is the one an only element inside a block (spaces trimmed). When used, the entire block gets center aligned, not the image directly.

Change History (13)

comment:1 Changed 5 years ago by Jakub Ś

Status: newconfirmed
Version: 3.0

The result of #7430 discussion.

comment:2 Changed 5 years ago by Rodrigo Siqueira

If the image is not the only element inside a block, then the center option could create a block style="text-align: center" around the image, like this:

<div style="text-align: center">

<img src="...">


This centered image alignment solution could be in the Alignment option (Image Properties) and also in the "JustifyCenter" (from the toolbar). Is this a possible solution?

comment:3 Changed 4 years ago by Jakub Ś

#10054 was marked as duplicate

comment:4 Changed 4 years ago by Jakub Ś

NOTE: there is also an issue about alignment being lost in BR mode - #8983

comment:5 Changed 4 years ago by Jari Pennanen

Images are exception (they shouldn't) I tried to set the config.justifyClasses but they didn't work for images.

These classes should work on all if one defines them, tables, images etc.

comment:6 Changed 4 years ago by Freddie Bingham

We would also like to see the center command active when an image is selected in the editor. Our users miss this feature from 3.6.2.

Using css upon the image to left/right align was a controversial approach. You are not aligning images to the left or the right now. They are being float:left and float:right now which is totally different behavior than what happens if you click next to the image and then press align left/right. If you want to "float" objects then add a float button. Align and float are not the same thing.

I would like an config option to set the behavior back to what it was in 3.6.2 with a container and text-align being used.

Last edited 4 years ago by Freddie Bingham (previous) (diff)

comment:7 Changed 4 years ago by Freddie Bingham

This distinction makes no sense;

{{{ left alignment will apply on image element as style="float: left",

while when it get applied on table element, align="left" is used instead. }}}

You can float a table just as you can an image but you now treat these two objects differently when using the ALIGN button, note it isn't called the FLOAT button.

comment:8 Changed 4 years ago by Jeremy Jannotta

Our users have been very affected by this as well, its one of the most complaints/questions we get now. While I understand the technical reasons why centering images is an issue, our end users do not, nor should they. Frankly, if you can center an image by selecting either side of it and clicking center button, why not wire up that functionality when the image is selected?

Desirable option 1): restore image centering in dialog and toolbar, but implemented with same best practices used when selecting either side of image, like with wrapper div, etc.

Desirable option 2): provide plugin or workaround, to do the above, that can be added manually to a configuration

comment:9 Changed 4 years ago by Piotrek Koszuliński

Resolution: fixed
Status: confirmedclosed

Introduced by #10659 (in CKEditor 4.3). Centering image is possible in our new image2 plugin which uses Widgets system (#9764).

comment:10 Changed 3 years ago by TomNM

Does this mean you're done with the current image dialog? In the current plugin, if someone wants a centered image, just set the image to "display:block; margin:0 auto;". Done.

The whole discussion is about a wysiwyg experience rather than proper HTML5. I'd wager that most people using this editor are NOT html coders. They want to achieve a result.

If the enhanced plugin can do this, why not allow the current one to do it?

comment:11 Changed 3 years ago by Piotrek Koszuliński

It is not correct from editing POV to set display:block to an image and keeping it in the paragraph (which cannot contain block elements). It is correct in normal HTML of course, but during editing such abnormalities lead to erroneous situations.

The new image plugin solves these problems, but it's a totaly new solution which we don't plan porting to old image plugin, because it would require too much work.

comment:12 Changed 3 years ago by Piotrek Koszuliński

BTW. I said that we're not planning to implement this feature in the old image plugin. But it doesn't mean that such feature cannot be implemented. Image dialog can be extended by another plugin or as a last resort, its code can be modified (nevertheless, CKEditor is open source). We'll never implement every feature which one can need, that's why we design CKEditor's API in a way which makes it possible to customise its features.

comment:13 Changed 3 years ago by TomNM

Understood. Thanks.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy