Image Alignment
  • 11 May 2022
  • 1 Minute zum Lesen
  • Mitwirkende
  • Dunkel
    Licht
  • pdf

Image Alignment

  • Dunkel
    Licht
  • pdf

There is no German content available for this article, You are viewing the fallback version (English).

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 Snippets button right underneath it
  3. A blade window opens on the right side, 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) → ctl+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

  1. Hover over to View site at the top right to view the changes

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 previosly added snippet?

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

How to remove/erase previosly added snippet?

To remove the snippet, click Shift+tab to format (arrange the snippets in a order)

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


War dieser Artikel hilfreich