---
title: "Customizing image alignment"
slug: "image-alignment"
description: "Image alignment helps you keep your image in the intended area, either left, right or centre and modifying it helps optimize the site experience for the user. "
tags: ["CSS Snippets"]
updated: 2026-06-20T06:28:59Z
published: 2026-06-20T06:28:59Z
canonical: "docs.document360.com/image-alignment"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing image alignment

The **Center align images in articles** CSS snippet lets you center all images in your knowledge base article content. By default, images are aligned to the left. You can also manually write CSS to align images left or right, or to maintain image proportions when the page is resized.

---

## How to center align images

1. Navigate to **Settings** () > **Knowledge base site** in the left navigation bar of the Knowledge base portal.
2. In the left navigation pane, navigate to **Site customization**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)

1. Click **Custom CSS & JavaScript**.
2. Select the **CSS** tab, then click **Add code snippets** in the top right.
3. Click **Center align images in articles**. The snippet is inserted into the CSS editor.
4. Click **Save**.

![CSS editor showing the Center align images snippet and the resulting centered image in the knowledge base](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Center_align_Images.png)

The CSS snippet used is:

```
article img {
    margin: 0 auto !important;
    display: block;
}
```

All images in article content are now center-aligned across the knowledge base.

 IMPORTANT

Before adding a new alignment snippet, remove the previously added one. If two alignment snippets are active at the same time, they will conflict and produce unpredictable results. The image alignment that is set applies to the entire knowledge base.

---

## How to align images left

To align images to the left, paste the following CSS directly into the CSS editor:

```
article img {
    margin: auto 0 0 0 !important;
    display: block;
}
```

---

## How to align images right

To align images to the right, paste the following CSS directly into the CSS editor:

```
article img {
    margin: 0 0 0 auto !important;
    display: block;
}
```

---

## How to maintain image proportions when resizing

To maintain the text and image proportions when readers zoom in or out on the knowledge base site, paste the following CSS into the CSS editor:

```
article img {
    height: auto !important;
}
```

![CSS editor showing the image resizing snippet that maintains proportions when the page is zoomed](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Resizing_images.png)

Click **Save** to apply.

---

## How to remove a previously added alignment snippet

Select the snippet code in the CSS editor and press **Delete** on your keyboard to remove it. Click **Save** to apply the change.

---

## Best practices

- **Remove the previous snippet before switching alignment** - adding a center-align snippet while a left-align snippet is still active will cause conflicts. Always delete the old snippet first.
- **Use `!important` carefully** - the snippets use `!important` to override default styles. Avoid adding other image CSS rules that also use `!important`, as they may conflict unpredictably.
- **Apply resizing CSS alongside alignment** - if you change image alignment, also apply the `height: auto` resizing snippet to ensure images scale correctly on different screen sizes.