> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Alignment

Allows you to display alignment controls for your widget. Depending on the use case, you are able to display horizontal, vertical, or both alignments simultaneously.

---

**Widget Configuration Output**

```json showLineNumbers={false}
{
  "contentAlignment": {
    "horizontal": "center",
    "vertical": "middle"
  }
}
```

Depending on the alignment control type, certain values are possible:

| Content alignment setting | Allowed values            |
| ------------------------- | ------------------------- |
| `horizontal`              | "left", "right", "center" |
| `vertical`                | "top", "bottom", "middle" |

**User Interface Output**

![output](/_fern-img/e10f442a57e70f8afe486a986bdb4ded4bfeab05025376fc7fb3b2c968a6523a.webp)

---

**JSON Schema**

| Property             | Type   | Description                                                                         | Example           |
| -------------------- | ------ | ----------------------------------------------------------------------------------- | ----------------- |
| `type`               | string | The type of setting component to display.                                           | "alignment"       |
| `label`              | string | The user friendly message to inform the user how this setting will be used.         | "Image alignment" |
| `id`                 | string | The variable name where the setting value will be available in the widget template. | "imageAlignment"  |
| `default`            | object | The default value to use when rendering the widget for the first time.              |                   |
| `default.horizontal` | string | Possible values include: “left”, “right”, “center”.                                 | "center"          |
| `default.vertical`   | string | Possible values include: “top”, “bottom”, “middle”.                                 | "middle"          |
| `typeMeta`           | object | Additional information needed based on the selected setting type.                   |                   |
| `typeMeta.display`   | string | Determines which alignment controls are displayed.                                  | "both"            |