# Align Shapes

## Content

The shapes can be aligned horizontally and vertically in a worksheet by using `moveShapesByHAlign` and `moveShapesByVAlign` commands respectively. The horizontal alignment of shapes can be controlled in left, right, and center directions by setting the `HorizontalAlign` enumeration to respective values.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shapeHorizontalAlign.gif)

Similarly, the vertical alignment of shapes can be controlled in top, middle, and bottom directions by setting the `VerticalAlign` enumeration to respective values.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shapeVerticalAlign.gif)

The following code sample adds three shapes and aligns them to horizontal (left) and vertical (bottom) positions.

```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100);
var shapeStyle = rect1.style();
shapeStyle.fill.color = '#40E0D0';
var rect2 = sheet.shapes.add('rect2', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 200, 200, 150, 100);
var rect3 = sheet.shapes.add('rect3', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 500, 350, 200, 100);

// horizontal align by left
var commandManager = spread.commandManager();
commandManager.execute({
    cmd: 'moveShapesByHAlign',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
    alignment: GC.Spread.Sheets.Shapes.HorizontalAlign.left
});

// vertical align by bottom
var commandManager = spread.commandManager();
commandManager.execute({
    cmd: 'moveShapesByVAlign',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
    alignment: GC.Spread.Sheets.Shapes.VerticalAlign.bottom
});
```