JMiur [E]

Alinear algo verticalmente no es tan sencillo como debería serlo. No hay una solución universal, todo depende de cada caso ¿Es un texto, corto? ¿Son imágenes de distinta altura? ¿Son elementos combinados?

leer artículo actualizado

| votar

11 comentarios:

Anónimo  

Hay una forma mucho mas sencilla de centrar imagenes dentro de un div. Supongamos un div the 400x100 en el que queremos poner dentro una imagen cualquiera.

< div style="width: 400px: height: 100px;">

< div style="width: 400px; height: 100px; background-image:url(laimagen a centrar); background-position: 50% 50%; background-repeat: no-repeat">< /div>

< /div>

(lo he escrito de memoria, pero creo que no me dejo nada)

En mi caso, el div mas externo puede tener efectos de hover para iluminar la imagen cuando se pasa el raton por encima.

Un saludo de alguien que se frustro cenrando imagines ;)

Responder
JMiur  

Antes que nada: gracias por el aporte :)

¿Quién no se ha visto frustrado centrando imágenes? :$

Tu código es correcto pero aquí deberíamos entrar en sutilezas. Por ejemplo, la imagen del ejemplo es un fondo y no un elemento independiente. Por supuesto, dependiendo del uso que queramos darle, esto no tiene la menor importancia.

Mi única conclusión es: ¡qué complicado es centrar imágenes verticalmente y que se vean correctamente en cualquier navegador! :D

Responder
Gem@  

Yo me he quedado con eso de (lo he escrito de memoria, pero creo que no me dejo nada)
Sana envidia es lo que siento además de frustación centrado imágenes jajaja sorry.
Es genial ;)

Responder
Anónimo  

Gracias JMiur, el ejemplo que coloco este tio de la imagen como fondo es una mierda,el tuyo es el que mola mas, gracias tio me has salvado!!!! eres un groso!

Responder
Anónimo  

Mi hermano me ha salvado un poco de cordura jejeje GRACIAS!!!

Responder
I  

Monumental. Funciona perfecto!!! Es la mejor solucion que encontré en la red, despues de horas de búsqueda...

Responder
Darwin Tony  

:)

Responder
Anónimo  

Hola Jmiur tengo una duda como puedo acomodar unas imagenes de una forma particular mira la siguiente imagen, quiero acomodar imagenes asi pero no se como.

link imagen ejemplo: http://img704.imageshack.us/img704/6862/ejemploimagen.png

Espero que me puedas ayudar =)

Y otra pequeña duda como puedo colocar imagenes dentro de las entradas y que por ejemplo al cambiar de plantilla yo pueda cambiar la imagen con algun codigo sin editar la entrada y cambiarla?

Responder
JMiur  

Habría que ver el ejemplo online. Así, en egenral, bastaría colocar las 4 en un DIV centrado sin saltos de línea entre ellas ya que si el tamaño es más o menos coo se ve en la imagen, se acomodrán solas.

Si hay codigos escritos en una entrada, estos, sólo pueden ser modificados desde la misma entrada o bien usando algún script que cambie ese dato posteriormente pero, en este último caso, el código sería excesivamente complejo porque habría que indicar una por una y además, habría un cambio evidente a cualquiera que mire el sitio; se vería la original y luego, la nueva lo que tendría un efecto visual feo además de sobrecarga el sito de modo excesivo.

La única manera lógica de hacer algo así es emplear CSS y que las imagenes sean fondos.

Responder
Anónimo  

oye jmiur tengo este codigo en la plantilla mia de juegos pero le modifico algo y no pasa nada y lo quisiera eliminar se podra?

/* wireframe layout tweaks */
body#layout *{margin:0;padding:0;}
body#layout #outer-wrapper {width:750px;}
body#layout #main-wrapper{width:40%;}
body#layout #copyr {display:none;}
body#layout #header-wrapper{height:60px;}
body#layout #content-wrapper{padding-top:px;}


y quisiera saber para que sirve esto: word-wrap: break-word; lo tengo en el codigo de la sidebar..

ay algun tutorial para aprender el codigo de blogger y css?

Responder
JMiur  

Todo lo que está en /* wireframe layout tweaks */ controla la forma en que se muestra la plantilla en el modo Diseño | Elementos de la página. La última línea es errónea:
body#layout #content-wrapper{padding-top:px;}
falta el valor.

word-wrap permite establecer la forma en que se manejan los saltos de línea. Cuando una palabra es demasaido larga, se corta y continua en la línea inferior. Sólo servía en IE pero ahora ya se aplcia al resto de los navegadores. Evitará que textos largos descompaginen los diferentes sectores del blog.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Suscribirse a los comentarios
 
CERRAR