---
title: "Personalização do alinhamento de imagens"
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-06-22T08:58:37Z
published: 2026-06-22T08:58:37Z
canonical: "docs.document360.com/image-alignment"
---

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

# Personalização do alinhamento de imagens

O **trecho CSS do Center Align Images in Articles** permite centralizar todas as imagens no conteúdo do seu artigo da base de conhecimento. Por padrão, as imagens estão alinhadas à esquerda. Você também pode escrever manualmente CSS para alinhar imagens à esquerda ou à direita, ou para manter as proporções da imagem quando a página for redimensionada.

---

## Como alinhar imagens no centro

1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação esquerda do portal da Base de Conhecimento.
2. No painel de navegação à esquerda, navegue até **Personalização do Site**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)

1. **Clique em CSS & JavaScript Personalizados**.
2. Selecione a aba **CSS** , depois clique **em Adicionar trechos de código** no canto superior direito.
3. Clique **no Centro para alinhar imagens nos artigos**. O trecho é inserido no editor CSS.
4. Clique **em Salvar**.

![CSS editor showing the Center align images snippet and the resulting centered image in the knowledge base](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Center_align_Images.png)

O trecho de CSS usado é:

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

Todas as imagens no conteúdo do artigo agora estão alinhadas ao centro em toda a base de conhecimento.

 IMPORTANTE

Antes de adicionar um novo trecho de alinhamento, remova o que foi adicionado anteriormente. Se dois trechos de alinhamento estiverem ativos ao mesmo tempo, eles vão entrar em conflito e produzir resultados imprevisíveis. O alinhamento da imagem que é definido se aplica a toda a base de conhecimento.

---

## Como alinhar imagens à esquerda

Para alinhar as imagens à esquerda, cole o seguinte CSS diretamente no editor CSS:

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

---

## Como alinhar imagens corretamente

Para alinhar as imagens à direita, cole o CSS a seguir diretamente no editor de CSS:

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

---

## Como manter as proporções da imagem ao redimensionar

Para manter as proporções de texto e imagem quando os leitores fazem zoom no site da base de conhecimento, cole o seguinte CSS no editor CSS:

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

![CSS editor showing the image resizing snippet that maintains proportions when the page is zoomed](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Resizing_images.png)

Clique **em Salvar** para se inscrever.

---

## Como remover um trecho de alinhamento previamente adicionado

Selecione o código do trecho no editor CSS e pressione **Delete** no seu teclado para removê-lo. Clique **em Salvar** para aplicar a alteração.

---

## Melhores práticas

- **Remova o trecho anterior antes de mudar o alinhamento** – adicionar um trecho de alinhamento central enquanto um trecho de alinhamento à esquerda ainda está ativo causará conflitos. Sempre apague o trecho antigo primeiro.
- **Use `!important` com cuidado** – os trechos servem `!important` para sobrescrever estilos padrão. Evite adicionar outras regras CSS de imagem que também usem `!important`, pois podem conflitar de forma imprevisível.
- **Aplique CSS de redimensionamento junto com o alinhamento** – se você mudar o alinhamento da imagem, também aplique o `height: auto` trecho de redimensionamento para garantir que as imagens escalem corretamente em diferentes tamanhos de tela.