Why do you need image alignment?

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.

How to align your image on the Document360 knowledge base site?

Follow the below steps to change the header font style in Document360 using CSS Snippets

  1. Click SettingsKnowledge base siteCustom CSS and JavaScript

  2. Click the Custom CSS tab → and click the Add code snippets button right underneath it

  3. A blade window appears, preloaded with seven basic snippets that you can use to customize your knowledge base site. Click the Align image center in documentation (the snippet will be added to your Custom CSS code block) → Ctrl+S to save it

For example

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

The above code applies in the custom CSS code block

The image content will now be centered within the container

To align image left or right, use the below snippets

1. To align image left

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

2. To align image right

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

How to remove/erase a previosly added snippet?

To remove the previously added snippet, select the intended snippet and press delete in the keyboard

Note

Before you input a new alignment snippet, don't forget to erase the previously added one.

Project-level setting

The image alignment that is set will be applied to the entire knowledge base