Introduce center alignment option for images

[Frederico Caldeira Knabben]

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.

[Jakub Ś]

The result of #7430 discussion.

[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="...">

</div>

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?

[Jakub Ś]

#10054 was marked as duplicate

[Jakub Ś]

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

[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.

[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.

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.

[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.

[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

[Piotrek Koszuliński]

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

[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?

[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.

[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.

[TomNM]

Understood. Thanks.