Avisos
Vaciar todo

Problema con el centraje de imagenes en widget HTML  

Página 3 / 3
 
Javier
 Javier
Estimable Member

Hola,
Quiero añadir una sección en el main bottom donde se muestren los partners del blog.
El problema es que al añadir los dos logos no tengo manera de que me salgan en linea y centrados.

El resultado que veis es el producido al añadir las dos fotos con codigo html y después decirle a la primera imagen que se posicione a la izquierda y a la otra que lo haga a la derecha, y el resultado es que me las separa mucho y la primera esta ubicada una linea mas arriba que la otra.
¿Alguna forma de hacer que salgan en linea, misma altura y centrados sin tanta separación?
Gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 25/07/2017 5:40 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

ResponderCitar
Respondido : 14/08/2017 1:24 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Javier
 Javier
Estimable Member

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

ResponderCitar
Respondido : 14/08/2017 11:02 am
Rafael
 Rafael
Miembro Moderator

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

ResponderCitar
Respondido : 14/08/2017 12:59 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Javier
 Javier
Estimable Member

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

ResponderCitar
Respondido : 14/08/2017 7:11 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 14/08/2017 7:40 pm

Javier
 Javier
Estimable Member

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

ResponderCitar
Respondido : 14/08/2017 8:36 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 14/08/2017 11:04 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Javier
 Javier
Estimable Member

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

ResponderCitar
Respondido : 15/08/2017 12:43 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

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

ResponderCitar
Respondido : 15/08/2017 1:30 am

Cursos Gratuitos WordPress

Javier
 Javier
Estimable Member

Ok.
Intentaré igualar alturas.
gracias

ResponderCitar
Respondido : 15/08/2017 1:53 am
Página 3 / 3