Image alignment

CKEditor allows aligning images and media.

This code is in align.module.css, added by the system/base library.

/**
 * Alignment classes for block level elements (images, videos, blockquotes, etc.)
 */
.align-left {
  float: left;
}
.align-right {
  float: right;
}
.align-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

An image will render as an <img class="align-center"> within a <p>, and the alignment works.

Media images are rendered as their selected display mode, which will have serveral layers of divs by default.

<article class="media media--type-image media--view-mode-default align-center">
    <div class="field field--name-field-media-image field--type-image field--label-visually_hidden">
        <div class="field__label visually-hidden">Image</div>
        <div class="field__item"> <img loading="eager" src="/sites/theme/files/styles/large/public/2023-08/mantra-theme-logo.png?itok=PAtjZxxg" width="204" height="33" alt="Mantra theme logo" class="image-style-large"></div>
    </div>
</article>

The align styles that worked for images don't work for media without additional customizations.

Here is an embedded media image:

The olivero theme has embedded-media.css, with this snippet:

.align-center img,
.align-center video,
.align-center audio {
  margin-inline: auto;
}

Olivero also has this in base.css:

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

audio {
  display: block;
  max-width: 100%;
}

With this, the align-center class can affect images within rendered media.