Avisos
Vaciar todo
Hola,
Estoy intentando centrar un grupo de thumbnails en un artículo, en la plantilla Encelado, pero no lo consigo.
He estado probando modificando el estilo css (tengo creada la hoja de estilo "miplantilla-custom.css", donde ya he modificado otros elementos sin problema). He localizado la clase que le afecta (.thumbnails) con el Firebug, pero lo más cercano que consigo hacer es centrarlas, cuando la plantilla se está mostrando a 1200px , pero se vuelven a alinear a la izquierda en cuanto voy reduciendo la ventana del navegador y la vista se adapta a 960px.
También he probado guiándome con este artículo: http://designshack.net/articles/css/how-to-center-anything-with-css/, pero también sin éxito.
Supongo que habrá que modificar algo más para que al adaptarse a resoluciones más pequeñas, las thumbnails sigan centradas .
Os agradecería mucho alguna orientación. Incluso, si es más fácil para vosotros, que me remitiérais a algún tutorial externo.
Os dejo aquí el código css que tengo localizado y el enlace del directorio dónde tengo colgado el articulo con las tumbnails:
¡Gracias!
.thumbnails > li {
float: left;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnail {
border: 1px solid #DDDDDD;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
display: block;
line-height: 20px;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
a.thumbnail:hover {
border-color: #0088CC;
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.thumbnail .caption {
color: #555555;
padding: 9px;
}
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 02/04/2014 3:20 am
Hola Micky,
Si son miniaturas o imágenes insertadas dentro de un artículo, no entendí el uso de CSS para centrar estos elementos.
¿Puedes facilitar una captura del código del artículo sin el editor habilitado? [toogle editor] o [hide/show] donde podamos ver como se insertan esas miniaturas y ver si un simple serviría.
- Los formatos de capturas admitidos son .jpg y .png
- No la incrustes en archivos .doc de Word o similares, ni en PDFs.
Saludos
Respondido : 02/04/2014 3:25 am
Hola, Luis. Gracias por contestar tán rápido.
La cuestión es que estoy utilizando las clases del Boostrapt que trae la plantilla Encelado. ( http://www.anidocs.es/bootstrap/docs/components.php#thumbnails)
He intentado mil y una cosas, pero no soy capaz.
Si se te ocurre alguna otra forma más sencilla, estoy abierto a sugerencias.
¡Gracias!
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 02/04/2014 3:48 am
Hola,
Prueba insertando un al principio y final de la lista en el código.
Saludos.
Respondido : 02/04/2014 5:43 am
Hola, Johnny,
He probado añadiendo el código de la lista entre las etiquetas y no hace ningún efecto.
Creo que lo que está mandando aquí es el estilo css, ya que desde el Firebug consigo mover los thumbnails modificando parámetros del estilo, pero como mi plantilla es responsive no consigo nada que pueda sevir definitivamente para que funcione bien en todas las resoluciones.
Supongo que la solución rondará por cambiar o añadir alguna línea de estilo css... lo que no sé ni cuál ni dónde 🙁
En cualquier caso, si se te ocurre alguna otra forma correcta, y que pueda ser responsive, de presentar varios catálogos con miniaturas de imagen, que puedan quedar centrados.
¡Muchas gracias!
Respondido : 03/04/2014 12:51 pm
Hola,
Se podría llegar a centrar sin necesidad de aplicar cambios en los CSS utilizando un pequeño truco. Si te fijas, a algunas etiquetas html se le aplica una clase de tipo spanX en donde X es un número del 1 al 12. Una valor de span12 hace que ocupe todo el ancho.
Se puede decir que el ancho se divide en 12 unidades, de forma que si pones a una etiqueta div una clase span3 ocupara 3 unidades de esas 12, es decir, una cuarta parte. Si quieres que algunos thumbnails se muestren centrados puede probar a agregar elementos li de lista vacios a la derecha de ese elemento o elementos.
Por ejemplo, si tienes solo uno pondrías poner algo así:
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
- Le he añadido un
- antes del elemento de lista que contiene tu thumbnail y otros despues para centrarlo, ya que tu thumbnail tiene un ancho de 2 (span2).
Si tienes 2 elementos podrías poner algo así:
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
-
Dossier Corporativo
Haga clic en la imagen para ver el documento en pantalla
Esto debería de funcionar, pero tendrás que hacer pruebas para ver qué tal va.
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 03/04/2014 3:39 pm
¡¡Funcionaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!!
A veces la solución es mucho más sencilla de lo que pensamos... pero para encontrar soluciones sencillas, antes debes haber solucionado muchos problemas complejos.
Tema solucionado 😉
Un verdadero placer contar con la ayuda de profesionales como vosotros.
¡Muchísimas Gracias, Pablo!
Respondido : 03/04/2014 4:10 pm
Nos alegra que te guste nuestro servicio. 🙂
Nos sería de mucha utilidad que nos dejases tu testimonio, solicitamos testimonios para colocar en nuestra página y ayudar a otros posibles clientes a decidirse por nuestros servicios:
Puedes crearlo aquí: https://www.webempresa.com/testimonios.html?view=form&layout=edit
Si nos quieres enviar tu testimonio podemos colgarlo en nuestra página con un link hacia la tuya que siempre te ayudará a posicionarte, nuestra página tiene un Page Rank de Google alto.
Si ya te lo solicitamos anteriormente y nos lo facilitaste, puedes dejar otro testimonio si tienes otra página que quieras posicionar mejor al tener un link en la nuestra con tu testimonio.
Gracias por publicar tu testimonio y por tus palabras de agradecimiento.
Respondido : 03/04/2014 6:15 pm
