Image alignment changes how an image is justified on the page and how text wraps around the image. It also is important for indicating visual reading order for screen readers.

  1. To align an image, edit the corresponding Image block.
  2. From the Edit Image modal, change the Image Alignment dropdown to one of the following options and then select the Save✔ button.
    • Left: The image will display on the left side of the page and blocks below it (e.g., a Content block with text) will wrap to the right of the image.
    • Center: The image will display in the center of the page and content will not  wrap on either side.
    • Right: The image will display on the right side of the page and blocks below it (e.g., a Content block with text) will wrap to the left of the image.
    • None: Image will appear on the page left-aligned and no content will wrap around it.

      editing modal for image block with image alignment dropdown open
  3. The image will now appear on the page in edit mode with the designated image alignment (center).

  4. Once the changes are published, the image will display as it will appear to learners.

    Image with right alignment

    Image with left alignment

    Section Break block placed between Image and Content blocks to prevent text from wrapping around image

    Note: Placing a Section Break block below an Image block prevents any content from wrapping around the Image block's image—regardless of the Image Alignment: setting.

Check out What is the visual reading order? to learn more about aligning images and visual reading order.

How do I add an image?
How do I add an image from Flickr?

How do I give credit for a piece of work using the Citation block?
How do I link to a file?

How do I upload files to the File Manager?