--- title: Text alignment category: features --- {@snippet features/build-text-alignment-source} The {@link module:alignment/alignment~Alignment} feature enables support for text alignment. You can use it to align your content to left, right and center or to justify it. ## Demo {@snippet features/text-alignment} ## Related features There are more CKEditor 5 features that can help you organize your content: * {@link features/title Document title} – Clearly divide your content into a title and body. * {@link features/headings Headings} – Split your content into logical sections. * {@link features/indent Block indentation} – Organize your content into visually separated blocks, indent crucial paragraphs, etc. * {@link features/block-quote Block quote} – Include block quotations or pull quotes in the rich-text content. * {@link features/remove-format Remove format} – Easily clean basic text formatting. ## Configuring alignment options It is possible to configure which alignment options are available in the editor by setting the {@link module:alignment/alignment~AlignmentConfig#options `alignment.options`} configuration option. You can choose from `'left'`, `'right'`, `'center'` and `'justify'`. Note that the `'left'` option should always be included for the LTR content. Similarly, the `'right'` option should always be included for the RTL content. Learn more about {@link features/ui-language#setting-the-language-of-the-content configuring language of the editor content}. For example, the following editor will support only two alignment options: to the left and to the right: ```js ClassicEditor .create( document.querySelector( '#editor' ), { alignment: { options: [ 'left', 'right' ] }, toolbar: [ 'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo' ] } ) .then( ... ) .catch( ... ); ``` {@snippet features/custom-text-alignment-options} ## Configuring the toolbar You can choose to use the alignment dropdown (`'alignment'`) or configure the toolbar to use separate buttons for each of the options: ```js ClassicEditor .create( document.querySelector( '#editor' ), { toolbar: [ 'heading', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify' ] } ) .then( ... ) .catch( ... ); ``` {@snippet features/custom-text-alignment-toolbar} ## Installation To add this feature to your editor, install the [`@ckeditor/ckeditor5-alignment`](https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment) package: ```bash npm install --save @ckeditor/ckeditor5-alignment ``` And add it to your plugin list and toolbar configuration: ```js import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ Alignment, ... ], toolbar: [ 'alignment', ... ] } ) .then( ... ) .catch( ... ); ``` Read more about {@link builds/guides/integration/installing-plugins installing plugins}. ## Common API The {@link module:alignment/alignment~Alignment} plugin registers: * Dropdown: `'alignment'`. * Buttons: `'alignment:left'`, `'alignment:right'`, `'alignment:center'`, `'alignment:justify'`. The number of options and their names are based on the {@link module:alignment/alignment~AlignmentConfig#options `alignment.options`} configuration option). * Command: `'alignment'`: You can align the currently selected block(s) by executing one of these commands: ```js editor.execute( 'alignment', { value: 'center' } ); ``` We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more. ## Contribute The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-alignment.