CKEditor 5 Media Embed alignment options does not work

I have not been able to replicate this with a default Drupal 10.x install.

I can see in your example markup there looks to be some custom stuff coming through, Blazy classes and is-b-loaded. Could this potentially be in an issue in the theme/site you're using?

Could you please try replicate this on a vanilla Drupal 9/10 install and let us know if the issue still persists?

Note: https://www.drupal.org/docs/core-modules-and-themes/core-modules/media-l... → is for CKEditor 4, not 5. Just clarified that at the top of the page.

note: The image look correct on the editing mode

Great!

however it does not align as expected after save. See images attached

Damn!

Could you share:

1. the embedded media markup stored in the DB/what you see in the "Source" view of CKEditor 5
2. already present 👍
3. which theme you are using?

(I share @DanielVeza's suspicion.)

This is reproducible on D10 as well with Ckeditor5 - enabled Claro theme to validate if it is not custom theme related.
media alignment and text wrapping around it does not work

Folks experiencing this issue should double-check that the media template in use (media.html.twig, or media--image.html.twig, or whatever) is properly outputting its attributes. If you have a media.html.twig that removes the wrapper div core provides, that will cause this issue. It needs to have

<div{{ attributes }}>
  {{ content }}
</div>

as opposed to just

{{ content }}

This is reproducible in Drupal 10.1.8, CKEditor 5.
#10 didn't help in my case.
Is there any other recommendation/solution for this issue, please?

We hit this same problem. I have a wrapper div with "align-center" but the styles applied do not center the image. The "margin:0 auto" does not work for my site. I cannot figure out why. There is no class applied on the image itself.

I was able to workaround it by adding "text-align:center" to the "align-center" class.

I am having this issue too drupal 10.2 vanilla install ckeditor5 media embed remote video, centering works in editor but not on front end. A regular image works as expected.

ksenzee, thank you. Your solution #10 worked. This was the issue in my case. Thank you

I met this issue too with Drupal 10+ which seems related to the media rendering with the default theme. Several div are wrapping the "img", it takes all the width available so the parent "figure" having the class "align-center" can not works with "margin: 0 auto".

@kenchilada workaround (#12) works fine. In my case I prefer use "width: fit-content" to avoid change the texts position inside.

I'm having the same issue in Drupal 10.3.6 with CKEditor 5 with the following media.html.twig:

<article{{ attributes.addClass(classes) }}>
  {{ title_suffix.contextual_links }}
  {% if content %}
    {{ content }}
  {% endif %}
</article>

The workaround at #12 is working for me on Drupal 10.3.5.

Had the same issue here: Align preview during editing works fine but after saved, the align is not applied as expected.
- Drupal 10.3.9
- CKEditor 5 - latest

NOTE that, IF I add a caption to the Image, it renders an extra HTML tag from

and then looks as expeted.
Anyways, I didn't had time to dig deeper but the issue still exists and solution from #10 💬 CKEditor 5 Media Embed alignment options does not work Closed: cannot reproduce worked for me! Thanks ksenzee!