Center aligning images in WYSIWYG CKEditor doesn't work

I think this is a duplicate #1043570: Floating images left and right

I don't know if a module respects this but what I know is that according to the W3C specifications <p> elements are only allowed to contain phrasing content which the <div> element is not. The output would be invalid HTML.

Actually I can confirm this, I have stripped my field.tpl.php of all the markup and the above code works.

Yes, it is true, <div> are not supossed to be inside a <p> element, but this is one of the things that makes Drupal uncompetitive against other CMS's.

Let's think of the user who never heard about the W3C and wants to center a picture but it can't because Drupal is acting 'smart' when in fact, from a user experience point of view, is not. How easy is to center a picture in Joomla / Wordpress? Very.

I hope there's a workaround for this kind of problem. I'm not even the user who posted this issue in the first place, but I certainly understand the frustration when a simple thing like this one cannot be done.

I do agree with you but this is really up to the WYSIWYG javascript library. TinyMCE uses display: block; margin-left: auto; margin-right: auto; on the <img> element itself when you center align. This is a very good way to do it and no divs, spans or whatever will be able to break it.

If however the WYSIWYG library uses style="text-align: center" to center it then it's up to the library to see the issue and switch from a paragraph to something else.

Some possible solutions
- If the WYSIWYG library has an option to select HTML-blocks it should work if you change from paragraph to a div and then center align the div. (assuming the library isn't strict about using the <p> element).
- Make a copy of the field.tpl.php template stripped of all markup and move it to your theme directory renamed as field--file.tpl.php
- Same as above but replace the <div> elements with <span>.

The <span> might be the easiest, it could actually work.

The question here is if this could be solved by the Media module without hacking core. I started reading some code and media module has a function to remove the label when a field is added using WYSIWYG. Maybe is possible to remove all the divs by doing some black magic alter with the Field API. I don't really know, I'm not familiar with the Field API.

I've looked into this a bit and found the following comment in wysiwyg-media.js:

    // @TODO: the folks @ ckeditor have told us that there is no way
    // to reliably add wrapper divs via normal HTML.
    // There is some method of adding a "fake element"
    // But until then, we're just going to embed to img.
    // This is pretty hacked for now.
    //

This is true but to my knowledge jQuery.fn.html() takes care of all the quirks (and the quirks shouldn't even apply to this case, the problem is with tables and whitespace). It would be only natural the the wysiwyg libraries would implement something similar since a solution already exists.

Anyways @lelizondo, apparently the intention is for the wysiwyg to also use the field.tpl.php template. I'm thinking this would also fix the problem as the wysiwyg would know it had to center align a block element while it know believes it is only an image.

Nevermind this seems to be related to contenteditable and a solutions seems very difficult since there are a ton of available editors.

So, what do we do about this. Postpone it? Of maybe won't fix?

I've been trying to figure out what the issue is here, but I can't reproduce what the comment is describing nor find a reference to something that would prevent this from working.

Could someone with further knowledge or the one who wrote the comment explain further what the issue is?

Enable WYSIWYG & Media and add the button to the editor to add inline media.

Configure your Input Formats to have this order:

Convert URLs into links	
Converts Media tags to Markup	
Convert line breaks into HTML (i.e. <br> and <p>)	
Correct faulty and chopped off HTML

Create a node, using the WYSIWYG and Media add an image. Center the image using the "Text Center" button in the editor.

Save the node.

Take a look at the HTML of the page and you'll see what @camdarley is talking about in #2

Sorry I was a bit unclear,

I meant the issue with inserting wrapping divs described in the inline comment mentioned #9. I'll see if I can get some unit tests on this later next week.

Nice research folks!

So, this isn't really a media bug per se, but we should fix it. I guess we could either get ckeditor to do alignment in a more standards compliant way OR stop Drupal from fixing the HTML. We can't remove all of the divs from media (although I think right now, we are a little too verbose). There will certainly be cases where we embedding video, links, etc and I don't think we can be sure we'll *never* have a div. Plus, the divs we have in place allow for consistent formatting when media is used as a field, or elsewhere.

Great news, patch in http://drupal.org/node/1043570#comment-4258282 fixes both issues. I'm marking this as duplicate.

Really hate to reopen a long-closed issue like this one, but the description is spot on for the 2.x dev branch it would appear. Floats are working great (as fixed in #1043570: Floating images left and right), but unless I'm missing something (sure hope I am!) the centering functionality has been lost. Any ideas?

Having the same issue. No option to center align images.

I am also having the same issue. Image is not aligning to the centre.

Same problem here too.

Same here

Same here. I searched and read many posts, but still am lost. I tried to use both

According to this post it's not possible to center images using the standard image plugin that ships with CKEditor.

Instead, I was able to use the Enhanced Image Plugin (also known as Image2) which provides much better capabilities for handling images.

After adding the necessary plugins to my CKEditor plugins folder (lineutils, widget, image2), I was able to get this sort of working. After inserting an image using the Media dialog, I can then save the page, then edit again. Once editing, the Image2 plugin kicks in and allows me to align the image, but I can no longer edit the image using the Media dialog anymore (even tho the token remains in tact).

I initially closed this thinking it was probably a WYSIWYG module issue (maybe it is), but it's possibly an integration issue in this module as well (the media_wsysiwyg module). Will try and dig into this.

You may center images by default (via css) and use the ckeditors left/right alignment function to override that setting. See issue #1515186: Current best practice for WYSIWYG Image Insert #14.

#24 isn't a work around, as the root case in #2 is still here.

However, #1 is fixed in the latest dev.