<!--
 //////////////////////////////////////////////////////////////////////////////
 // @license
 // This file is part of yFiles for HTML 2.6.
 // Use is subject to license terms.
 //
 // Copyright (c) 2000-2024 by yWorks GmbH, Vor dem Kreuzberg 28,
 // 72070 Tuebingen, Germany. All rights reserved.
 //
 //////////////////////////////////////////////////////////////////////////////
-->
# Arrange Objects Demo

# Arrange Objects Demo

This demo presents simple operations for aligning and distributing nodes.

## Things to Try

- Select several nodes and use  
  ![Align Top](../../resources/icons/align-top-16.svg 'Align Top')   ![Align Bottom](../../resources/icons/align-bottom-16.svg 'Align Bottom')   ![Align Left](../../resources/icons/align-left-16.svg 'Align Left')   ![Align Right](../../resources/icons/align-right-16.svg 'Align Right')  
  to align these nodes at their top, bottom, left, or right border.
- Select several nodes and use  
  ![Align Vertically](../../resources/icons/align-vertical-16.svg 'Align Vertically')   ![Align Horizontally](../../resources/icons/align-horizontal-16.svg 'Align Horizontally')  
  to align these nodes such that their centers coincide.
- Select several horizontally and/or vertically overlapping nodes and use  
  ![Distribute Vertically](../../resources/icons/distribute-vertical-16.svg 'Distribute Vertically')   ![Distribute Horizontally](../../resources/icons/distribute-horizontal-16.svg 'Distribute Horizontally')  
  to distribute these nodes along the indicated coordinate axis.
