# Text alignment

# Overview

Text alignment functionality enables you to predefine the horizontal and vertical alignment of how the text is displayed in the cells.

# Horizontal and vertical alignment

To initialize Handsontable with predefined horizontal and vertical alignment, provide the alignment details for the className cells in the form of a grid, configuring cells by col,row, and className. Cells can be configured individually, or the entire grid can be configured. See the code sample below for an example.

Available class names:

• Horizontal: htLeft, htCenter, htRight, htJustify,
• Vertical: htTop, htMiddle, htBottom.

Alignment changes can be tracked using afterSetCellMeta callback.

# Basic example

The following code sample configures the grid to use htCenter and configures individual cells to use different alignments.

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(100, 18),
  colWidths: 100,
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  mergeCells: [
    { row: 1, col: 1, rowspan: 3, colspan: 3 },
    { row: 3, col: 4, rowspan: 2, colspan: 2 }
  ],
  className: 'htCenter',
  cell: [
    { row: 0, col: 0, className: 'htRight' },
    { row: 1, col: 1, className: 'htLeft htMiddle' },
    { row: 3, col: 4, className: 'htLeft htBottom' }
  ],
  afterSetCellMeta(row, col, key, val) {
    console.log('cell meta changed', row, col, key, val);
  }
});