Personalización de la alineación de imágenes

El fragmento CSS de alineación del Centro te permite centrar todas las imágenes en el contenido de tu base de conocimiento. Por defecto, las imágenes están alineadas a la izquierda. También puedes escribir manualmente CSS para alinear las imágenes a la izquierda o derecha, o para mantener las proporciones de imagen cuando la página se redimensiona.

Cómo centrar las imágenes

Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la Base de Conocimientos.
En el panel de navegación izquierdo, navega hasta personalización del sitio.

Site customization page showing the Custom CSS and JavaScript option

Haz clic en CSS y JavaScript personalizados.
Selecciona la pestaña CSS y luego haz clic en Añadir fragmentos de código en la esquina superior derecha.
Haz clic en centrar y alinear imágenes en los artículos. El fragmento se inserta en el editor CSS.
Haz clic en Guardar.

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

El fragmento de CSS utilizado es:

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

Todas las imágenes en el contenido del artículo ahora están alineadas hacia el centro en toda la base de conocimiento.

IMPORTANTE

Antes de añadir un nuevo fragmento de alineación, quita el que se añadió antes. Si dos fragmentos de alineación están activos al mismo tiempo, entrarán en conflicto y producirán resultados impredecibles. La alineación de imagen que se establece se aplica a toda la base de conocimiento.

Cómo alinear imágenes a la izquierda

Para alinear las imágenes a la izquierda, pega el siguiente CSS directamente en el editor CSS:

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

Cómo alinear bien las imágenes

Para alinear las imágenes a la derecha, pega el siguiente CSS directamente en el editor CSS:

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

Cómo mantener las proporciones de imagen al redimensionar

Para mantener las proporciones de texto e imagen cuando los lectores acercan o alejan el zoom en la base de conocimiento, pega el siguiente CSS en el editor CSS:

article img {
    height: auto !important;
}

CSS editor showing the image resizing snippet that maintains proportions when the page is zoomed

Haz clic en Guardar para postularte.

Cómo eliminar un fragmento de alineación añadido previamente

Selecciona el código fragmentado en el editor CSS y pulsa Suprimir en tu teclado para eliminarlo. Haz clic en Guardar para aplicar el cambio.

Mejores prácticas

Elimina el fragmento anterior antes de cambiar la alineación : añadir un fragmento de alineación central mientras uno de alineación izquierda sigue activo causará conflictos. Borra siempre primero el fragmento antiguo.
Úsalo !important con cuidado : los fragmentos sirven !important para anular los estilos predeterminados. Evita añadir otras reglas CSS de imagen que también usen !important, ya que pueden entrar en conflicto de forma impredecible.
Aplica CSS de redimensionamiento junto con la alineación : si cambias la alineación de la imagen, también aplica el height: auto fragmento de redimensionamiento para asegurarte de que las imágenes escalen correctamente en diferentes tamaños de pantalla.