# Text alignment

The alignment feature lets you align your content to the left or right as well as center or justify it.

<a id="demo">

## Demo

Click inside a paragraph or a header and use the toolbar dropdown to change the alignment of the element.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Alignment } from 'ckeditor5';

ClassicEditor.
	create( {
		licenseKey: '<YOUR_LICENSE_KEY>' // Or 'GPL'.
		plugins: [ Alignment, /* ... */ ],
		toolbar: [ 'alignment', /* ... */ ]
		alignment: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Alignment } = CKEDITOR;

ClassicEditor.
	create( {
		licenseKey: '<YOUR_LICENSE_KEY>'
		plugins: [ Alignment, /* ... */ ],
		toolbar: [ 'alignment', /* ... */ ]
		alignment: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-alignment-options">

## Configuring alignment options

<a id="defining-available-options">

### Defining available options

It is possible to configure which alignment options are available in the editor by setting the [`alignment.options`](../api/module_alignment_alignmentconfig-AlignmentConfig.md#member-options) configuration option. You can choose from `'left'`, `'right'`, `'center'`, and `'justify'`.

> **Note**
>
> You should always include the `'left'` option for the LTR content. Similarly, you should always include the `'right'` option for the RTL content. Learn more about [configuring language of the editor content](../getting-started/setup/ui-language.md#setting-the-language-of-the-content).

For example, the following editor will support two alignment options: to the left and to the right:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		alignment: {
			options: [ 'left', 'right' ]
		},
		toolbar: [
			'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="using-classes-instead-of-inline-style">

### Using classes instead of inline style

By default, alignment is set inline using the `text-align` CSS property. If you wish the feature to output more semantic content that uses classes instead of inline styles, you can specify class names by using the `className` property in `config.alignment.options` and style them by using a style sheet.

> **Note**
>
> Once you decide to use classes for the alignment, you must define `className` for **all** alignment entries in [`config.alignment.options`](../api/module_alignment_alignmentconfig-AlignmentConfig.md#member-options).

The following configuration will set `.my-align-left` and `.my-align-right` to left and right alignment, respectively.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		alignment: {
			options: [
				{ name: 'left', className: 'my-align-left' },
				{ name: 'right', className: 'my-align-right' }
			]
		},
		toolbar: [
			'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-the-toolbar">

## 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( {
		// ... Other configuration options ...
		toolbar: [
			'heading', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="related-features">

## Related features

CKEditor 5 has more features that can help you organize your content:

* [Document title](title.md) – Clearly divide your content into a title and body.
* [Headings](headings.md) – Split your content into logical sections.
* [Block indentation](indent.md) – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
* [Block quote](block-quote.md) – Include block quotations or pull quotes in the rich-text content.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`Alignment`](../api/module_alignment_alignment-Alignment.md) plugin registers:

* Dropdown: `'alignment'`.

* Buttons: `'alignment:left'`, `'alignment:right'`, `'alignment:center'`, `'alignment:justify'`.

  The number of options and their names are based on the [`alignment.options`](../api/module_alignment_alignmentconfig-AlignmentConfig.md#member-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' } );
  ```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) 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.

<a id="content-compatibility">

## Content compatibility

The [`Alignment`](../api/module_alignment_alignment-Alignment.md) plugin provides support for the deprecated `align` attribute.

Block elements such as `<p>` with the `align` attribute are accepted by the plugin, but the editor always returns the markup in a modern format, so the transformation is one way only.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-alignment>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)