Skip to main content
MindTouch Success Center

Align text and images on a page

Written by Theresa Manzo
Product Manager at MindTouch
This page applies to:MindTouch (current)

This article explains how to align and indent content in the MindTouch editor. 
 

How can I control the positioning of content?


There are two different ways to control the positioning of your content on a page:

  • Alignment.  Controls the horizontal position of content in relation to its surrounding content.
  • Indentation.  Moves that content away from or toward the edge of the container it is in.
     

How does MindTouch handle alignment and indentation?


Previously, the editor used inline CSS to align and indent content, which is contrary to responsive design best practices. Converting these inline styles to class names allows for more flexibility in designing your site because now you can change alignment or indentation at a global level instead of hunting down each inline style on every page. Class names also make it easier to create streamlined, responsive CSS for all devices. 
 

Why are class names important for responsive design?


  • Follows responsive design best practices of separating style from structure
  • Smaller CSS and HTML files improve page load performance
  • Responsive sites rank higher in mobile search indexes
  • Changing site design is easier
  • Creating responsive-ready content is easier
     

How do I align text in MindTouch?


Text alignment in the editor aligns your text left, center, right or justified on a page. You can control your alignment in the editor by choosing one of the following buttons in the toolbar:

Screenshot of text alignment controls in toolbar

Left aligned text

Screenshot of left aligned text

Right aligned text

 Screenshot of right aligned text

Justified text

Screenshot of justified text

Centered text

 Screenshot of centered text
 

How do I align images in MindTouch?


Image alignment is the ability to position your image to the left or right of existing content on a page. These controls can be found in the editor toolbar and the image dialog:

Screenshot of image alignment controls in toolbar

Left aligned text

Screenshot of a left aligned image.

Right-aligned image

Screenshot of right aligned image

Image alignment controls in the image dialog

Screenshot of image alignment controls in dialog

There are fewer options for image alignment than for text alignment because the image CSS only handles left and right alignment.

 

How do I indent content in MindTouch?


Indenting content in MindTouch moves your content away from or toward the left side of the content container it is in. Use the following controls in the editor toolbar to indent your content:

Screenshot of content indentation control in toolbar

Indented text

Screenshot of indented text

Indented image

Screenshot of an indented image

  • Was this article helpful?