---
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-01-30T08:29:52Z
published: 2026-01-31T09:30:11Z
---

> ## 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

Image alignment helps you keep your image in the intended area, either to the left, right, or center, and modify it to optimize the site experience for the user. It also helps you to keep the image and content proportions maintained when you resize the content on your **Knowledge base site**.

By default, images on your **Knowledge base site** are aligned to the left.

## Center images in your Document360 Knowledge base

To align images centrally using custom CSS, follow the below steps:

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

The page holds all the basic site design configurations.
3. In the **Site customization** page, Click **Custom CSS & JavaScript**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)
4. From the left dropdown, select **Custom CSS / JavaScript**.
5. Click **Add code snippets** on the top right of the code space, and a panel appears, preloaded with seven snippets that you can use to customize your **Knowledge base site**.
6. Click **Center align images in articles**, and the snippet will be added to your Custom CSS code block.
7. Click **Save**.

For example,

KB site 1.0KB site 2.0

```css
.content_block .content_container .content_block_text img{
margin: 0 auto;
display: block;
}
```

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

The image will now be centered within the frame on your **Knowledge base site**.

![Instructions for adding code snippets in Document360's customization settings interface.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Center_align_Images.png)

### Aligning Images

#### 1. To align the image left

KB site 1.0KB site 2.0

```css
.content_block .content_container .content_block_text img {
    margin: 0px 0 0;
    display: block;
}
```

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

#### 2. To align the image right

KB site 1.0KB site 2.0

```css
.content_block .content_container .content_block_text img {
    display: block;
    margin: 0 0 0 auto;
}
```

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

#### Remove/erase a previously added code snippet

To remove the previously added code snippet, select the intended snippet and press **delete** on the keyboard.

> [!NOTE]
> ** NOTE
> 
> Before you add a new alignment snippet, don't forget to erase the previously added one.
> 
> The image alignment that is set will be applied to the entire knowledge base.

---

## Resizing images on the Knowledge base site

To maintain the text and image proportions when you zoom in (enlarge) or zoom out (minimize) on your Knowledge base site,

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

The page holds all the basic site design configurations.
3. In the **Site customization** page, Click **Custom CSS & JavaScript**.
4. From the left dropdown, select **Custom CSS / JavaScript**.
5. In the left pane, click **CSS** and paste the following CSS snippet in the code space:

KB site 1.0KB site 2.0

```css
.content_block .content_container .content_block_text img {
height: auto !important;
}
```

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

1. Click **Save**on the top right.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Resizing_images.png)