Problema con el centraje de imagenes en widget HTML  

Hola Javier,

si es cierto que probé muchas cosas pero al final los deshice porque en la versión móvil se veían fuera de la pantalla.

¿Probaste cerrando el código del banner en un iframe?

Contenido solo visible a usuarios registrados

Saludos

Perdona Luis,
Es que me hago un poco de lio al tener el codigo que me muestras el banner publicitario ubicado encima de la sección de Partners que es la que alberga las dos imagenes corporativas.
¿Como seria el código que me sugieres teniendo en cuenta que hay dos imagenes?
gracias

Hola Javier, muy buenos días,

Acabo de revisar el código que tienes para este bloque y veo que puedes hacerlo de esta forma que es mucho más sencilla .

Lo ideal es que uses esta estructura de base:

HTML


  


CSS
.image-container {
  display: flex;
  justify-content: center;
}

De esta forma estará centrado y los elementos en el mismo nivel.

En este enlace se explica de forma detallada lo que nos pides -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

En tu caso, solo tienes que cambiar el CSS del contenedor que has creado (div) para colocar las imagenes

De esto que tienes actualmente:

{
    width: 100%;
    text-align: center;
}

Por esto:

{
width: 100%;
display: flex;
justify-content: center;
}

Por último verás que se pegan, para evitar esto te aconsejo que dentro del contenedor principal en las

que tienes ahora las cambies por otro contenedor que se llame en las dos imagenes igual y aplica una separación vía CSS que se aplicará por igual.

Saludos

Hola Rafael,
Gracias por la respuesta.
He modificado lo que me comentas y ya se ven juntas y centradas. Lo único es que me pierdo con lo siguiente que me comentas:

"Por último verás que se pegan, para evitar esto te aconsejo que dentro del contenedor principal en las

que tienes ahora las cambies por otro contenedor que se llame en las dos imagenes igual y aplica una separación vía CSS que se aplicará por igual."

Todo lo he echo con codigo en HTML.

Gracias

Hola

En tu caso la etiqueta HTML p ya actúa como contenedor por lo que no sería necesario cambiarla.

Si quieres que se vean un poco separadas, puedes evaluar agregar un estilo inline en alguna de las imágenes, por ejemplo (ver imagen):

style="margin-right:10px;"

Saludos.

Saludos.

Hola John,
Con el código que me dices ya se han separado. Gracias.

Si pudiera bajar un poco el nivel de la imagen de la izquierda seria genial.
El otro problema que veo es que en versión móvil se ven mal.

Gracias

Hola

Si quieres que sea responsive, evita mejor el uso de estilos en línea y agrega una clase, por ejemplo llamada logos-inferiores, tu código quedaría como:

Luego en algún archivo CSS de tu theme, por ejemplo style.css, al final agrega el siguiente código CSS:

.logos-inferiores{
	width: 100%;	
	display:flex;
	justify-content: center;	
}

.logos-inferiores p{
	margin-right:10px;
}

@media (max-width:768px){
	.logos-inferiores{
		display:block;
		text-align: center;
		width:100%;
	}	
}

Refresca tu navegador para ver los cambios.

Saludos.

Perfecto John.
Ya esta centrado y se ve bien en el móvil.
Si pudiera bajar la imagen de la izquierda un poco para que quede centrada respecto a la de la derecha ya seria genial.
Gracias

Hola,

No te recomendaria modificar las imágenes ya que veo que no tienen el mismo tamaño y se pueden descuadrar.

Ok.
Intentaré igualar alturas.
gracias