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 () in the left navigation bar in the Knowledge base portal.

2. In the left navigation pane, navigate to Knowledge base site > Customize site > Custom CSS & JavaScript .

3. From the left navigation pane, click the CSS tab.

4. 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.

5. Click Center align images in articles, and the snippet will be added to your Custom CSS code block.

6. Click Save.

   For example,

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

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

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

Aligning Images

1. To align the image left

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

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

2. To align the image right

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

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

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 () in the left navigation bar in the Knowledge base portal.

2. In the left navigation pane, navigate to Knowledge base site > Customize site > Custom CSS & JavaScript .

3. From the left navigation pane, click on the CSS tab and paste the following CSS snippet:

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

article img {
    height: auto !important;
}

3. Click Save on the top right.