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
-
Click Settings → Knowledge base site → Custom CSS and JavaScript
-
Click the Custom CSS tab → and click the Add code snippets button right underneath it
-
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
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