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

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

Site customization page showing the Custom CSS and JavaScript option

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

CSS editor showing the Center align images snippet and the resulting centered image in the knowledge base

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

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.