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:
Left aligned text
Right aligned 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:
Left aligned text
Image alignment controls in the image 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: