JMiur [E]

Hay elementos HTML que son bloques, ocupan todo el ancho disponible y contienen a otros elementos o textos. En este ejemplo, un DIV tiene dos contenidos, un texto dentro de una etiqueta SPAN y una imagen en la etiqueta IMG.
<div>
<span> ....... un texto ....... </span>
<img src="URL_imagen" />
</div>
Para centrar el contenido, usamos la propiedad text-align: center pero ¿dónde? Obvio, pensamos que si queremos centrar el texto y la imagen, hay que centrar esas etiquetas:
<span style="text-align: center;"> ....... un texto ....... </span>
<img style="text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.


No funciona.

En términos generales, para centrar un contenido debemos establecer esa propiedad en el contenedor y no en el contenido:
<div style="text-align: center;">
<span> ....... un texto ....... </span>
<img src="URL_imagen" />
</div>

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.


Esto es debido a que etiquetas como SPAN e IMG no son bloques, sólo ocupan el ancho de su contenido; lo mismo ocurrirá con muchas otras como A, INPUT, B, STRONG, EM, etc. todas estas son las llamadas etiquetas inline.

Cualquier etiqueta inline puede ser convertida en una etiqueta de bloque; para eso, le agregamos la propiedad display: block así que ya no nesitamos un contenedor:
<span style="display: block; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

Con el texto no hay problema pero la imagen no se centra; en esa etiqueta necesitamos algo más, agregarle margin: valorpx auto Esa palabra auto, hará que se centre horizontalmente, sin importa su ancho:
<span style="display: block; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />
Pero, auto no sólo sirve para las imágenes; en esos ejemplos, el SPAN ocupa todo el ancho disponible pero, podríamos querer que tuviera un ancho definido:
<span style="display: block; text-align: center; width: 500px;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

Deberíamos usar el mismo método que antes y aplicar margin:
<span style="display: block; margin: 10px auto; text-align: center;"> ....... un texto ....... </span>
<img style="display: block; margin: 10px auto; text-align: center;" src="URL_imagen" />

Nam sit amet diam quis quam sollicitudin pharetra. Integer rutrum odio dignissi.

En resumen, todos los elementos de bloque o convertidos en bloque usando CSS, se centran poniendo el valor auto en sus márgenes izquierdo y derecho pero, requieren que establezcamos su ancho con width.

¿Es posible hacerlo sin conocer ese ancho o sin establecerlo? Salvo en caso de imágenes esto no era posible hasta que la propiedad display empezó a aceptar otros valores, primero en algunos navegadores pero ahora ya está disponible en Internet Explorer 8 y es uno de los motivos por los cuales deberíamos tener actualizado el navegador ya que estas nuevas propiedades, podrían llegar a cambiar la forma en que se diseñan los sitios web.

Un ejemplo sencillo, un párrafo cuyo contenido está centrado y cuyo ancho desconocemos; margin no nos ayuda a centrarlo:
<p style="margin: 10px auto; text-align: center;"> ....... un texto ....... </p>

Sed vitae ante libero, vitae bibendum turpis.


Lo centraremos agregando la propiedad display: table si necesidad de tener que conocer el ancho:
<p style="display: table; margin: 10px auto; text-align: center;"> ....... un texto ....... </p>
Podemos probarlo cambiando el contenido; tanto en IE8 como en Firefox, Chrome u Opera:
demo 1 | demo 2 | reset

Sed vitae ante libero, vitae bibendum turpis.

24 comentarios:

Eulalia  

Por si te resulta útil:
Tengo Explorer 8. Estoy leyendo tu entrada y no entiendo a que te refieres ya que en los dos últimos ejemplos, el segundo se ve exactamente igual que el primero. He entrado con Firefox y he visto la diferencia. Puedes verlo por ti mismo pinchando aquí.
Un abrazo.

Responder
Gem@  

Para mi eres el mejor y si suena a peloteo me importa un pimiento porque hace tiempo que paso de paparruchas como el que dirán o pensarán los demás.
He visitado muchas páginas, manuales, tutoriales y en ninguna explican con ejemplos como tu lo haces, ya te lo dije otras veces pero es que yo soy muy repetitiva.
Quizás muchos no se den cuenta que detrás de cada ejemplo tuyo hay un cúmulo de códigos que hacen que ese ejemplo se vea online, nada de imágenes estáticas ni capturas.
Pruebas aquí y allá, explicación detallada y ahora consigue que todo quede en su sitio igual que en tu imaginación.
No veo esa forma de mostrar las cosas en ningún sitio y una ya tiene un tiempo mirando el código fuente de las cosas.
¿Sabes lo mejor? que aprendo contigo y esa forma de hacer las cosas la he aprendido de ti.
Lo que se divierte uno mientras crea un post de esta clase, y lo que se pierden otros mostrando fotitos o enlaces a otros sitios externos con los ejemplos online :D

Responder
Graciela  

Como dices Piedra Preciosa, supongo que tiene alma de maestro-educador a eso me refiero.

Explicas de maravillas, la paciencia para tratar de hacer entender a la lejanía, contestas todos los coments, las pavadas que te pregunto uyyyy, no te guardas nada, lo compartes :D...o sea eres muy generoso. No te la crees, eso demuestra que eres buena gente.

Entiendes perfectamente el 'jugar y divertise' en el blog...te lo digo Jorge eres un amigo :P

PD: no te pongas colorado, es verdad todo lo que te dejamos y es un gusto visitarte diariamente chauuuuu

Responder
Manfenix  

Gracías JMiur, este post termina de aclararme algunas dudas respecto del centrado a aplicar en los títulos de la sidebar. ;)

Responder
Analía Alvado  

JMiur: Maestro de Maestros, made in Argentina :)

Como siempre, es un placer leerlos a todos (mi orgullo crece)

Saludos

Responder
JMiur  

Eulalia:
Me parecer raro ¿No estarás usando IE8 en modo IE7? Esta es otra captura.

Gem@ : Yo también aprendo ... y me divierto :D

Graciela: Oh no, Dios me libre de semejante castigo :D No me haga sonrojar :$

Manfenix: Me alegro que te sea útil.

Gracias, Analía :$

Responder
Claudio - Poca Tinta  

Buen post Master.

Yo siempre aprendiendo por acá, hay cosas que uno da por hecho pero Usted siempre explicando el porque.. genial.

Estuve de vacaciones, es horrible estar lejos de Internet... ¿cómo habrá sido la humanidad antes?

slds..

Responder
Anahí  

Ah, gracias, gracias, me acaba de sacar de un intríngulis que tenía.
Saludos.

Responder
JMiur  

Con razón no se lo veia en ninguna parte, Don Claudio ¿Sin internet? Esas no son vacaciones, casi casi son una torutua :D

Me alegro que sirviera, Anahí.

Responder
Eulalia  

Pues que yo sepa no, aunque todo es posible en este mundo. Le he dado a Ayuda y en Acerca de Explorer me sale una ventanita que dice que es el IE8 ¿Hay alguna forma de saber si está en modo IE7? En el menú de herramientas, donde tu tienes la Consola de Sun Java a mi me sale Messenger, Diagnosticar problemas de conexión y enviar a One Note, que no se que es, supongo que algo que me bajé y no recuerdo, pero el resto es igual.
Un abrazo.

Responder
Gem@  

me solidarizo con Claudio yo sé lo que es pasar por esa tortura :S

Responder
JMiur  

Eulalia:
No es algo sobre l oque tenga mucha idea y siempre me apreció un poco confuso o poco amigable. En IE8 existe la posibilidad de hacerlo funcionar como IE7. A eso lo llaman Compatibilidad. En las herramientas hay un opción llamada Configuración de Vista de Compatibilidad donde se muestra una lista de sitios; uno puede elimianr todos (si es que hay) y destildar las opciones para no usar ese modo.
Creo que también aparece un ícono al lado de los botones de la barra de direcciones que permite permutar entre un modo y otro.
Lo uso de manera "instintiva", lamento no poder ser de mucha más ayuda pero,, por la captura que has puesto, me da la impresión que eso debe estar ocurriendo ya que así, se vería en IE7 que no entiende estas propeidades y muchas otras que se han agregado a IE8.

Gem@: Usted debería escribir un artículo sobre ese tema; sería una forma de ayudar a otros desesperados: "Cómo sobrevivir a unas vacaaciones sin internet y no morir en el intento ..." :D

Responder
Eulalia  

Hola: Pues no, no lo tenía activado eso del modo compatibilidad. Precisamente he pinchado por ver si era eso y no había ninguna direccion ahí, así que no entiendo porqué lo vi como lo vi.
Uso los dos navegadores por pura comodidad, así puedo abrir a la vez las dos cuentas que tengo sin tener que andar entrando y saliendo.
¡En fin! Misterios de la internete esa, como diría mi abuela si aún viviera.
Un abrazo.

Responder
Gem@  

¿Quién dice que ese artículo no está ya escrito J.Miur?
Mi libreta de apuntes está íntegramente escrita con la barriga jajajajaja cualquiera que me lea pensará que tengo una forma de escribir muy extraña :)

Responder
JMiur  

Eulalia:
Pués, hago lo mismo salvo que tengo 5 navegadores porque lo mio es patológico aunque me estoy curando porque llegué a tener 8 :$
Acabo de agregarle al blog una etiqueta META que sugiere Microsof y que, en teoría, le dice al navegador que este sitio está pensado para IE8:
<meta content='IE=8' http-equiv='X-UA-Compatible'/>
No sé si tendrá algún efecto. El misterio sigue :)

Gem@: No dije nada. Esperemos que un dia te decidas porque, ya sabes, lo que sale escrito con la barriga es siempre un placer leerlo y lo que más me conmueve así que ... sól ofalta que se atreva, madame :D
¡Hagamos un blog con otros nombres :D ? ¡Y que tiemble la web!!!!!!!!!!!!!!!!!!!! :D

Responder
Bonzu Pipinpadaloxicopolis III  

En ocaciones por mi ignorancia o pereza uso la dichosa etiqueta center, entiendo que debe evitarce su uso pero ya vez, gracias por la detallada explicación y por los magníficos ejemplos.

Responder
Eulalia  

Jeje, yo también tengo 5 y uso 4 a diario para diferentes cosas.
Por cierto, no hay cambios en el modo en que lo veo con Explorer.
Un abrazo.

Responder
JMiur  

Eulalia: es increible. No tengo la menor idea de por qué puede estar ocurriendo.

Responder
saccperuano  

Holas Gran JMiur aprovecha esta entrada pa una consulta
Este es mi blog de pruebas con una entrada cualquiera -->http://entretenimiento-diario.blogspot.com/2009/10/kim-kardashian-para-la-revista_4682.html

Por fabor observa estoy usando estile, para darle ese formato a las imagenes, xq antes las tenia asi con ese formato de imagen grandote-->http://entretenimiento-diario.blogspot.com/2009/10/ver-en-vivo-trinidad-y-tobago-vs-mexico_8968.html

Como te das cuenta estoy usado el style precisamente para reducir el tamaño y alinearlo a la izq. de los post, pero resulta que en mi blog oficial tengo ya mas de 400 post, mi pregunta es esta es posible automatizar este trabajo y hace de golpe ese style con todos los post que tengo ?? o caballero nomas tengo que hacerlo a mano y uno x uno a cada uno de los post cosa que veo retecontra engorroso, por fabor digame si es posible automatixar este proceso
DESDE YA GRACIAS X SU AYUDA Y ANSIOSO X SU REPUESTA:$ ME DIJERON QUE SI ERA POSIBLE PERO NO eactmente como hacerlo, xq tampoco tampoco soy un genio que domine el html y q entienda en un 2x3 necesito que me expliquen amplio :$:$

Saludos desde Lima Perú Gran Maestro JMiur

Responder
JMiur  

Si l oque quieres es que todas las imágenes de los posts tengan ese formato, bastaría crear una clase y agregarla antes de </b:skin> por ejemplo:

.contentb img {
float: left;
height: 120px;
margin: 20px 10px 5px 0px;
width: 120px;
}

Y, si eventualmente, alguna imagen de un post no quieres que se redimensione o quieres darle otro estilo, entonces, a esas, les agregas el atributo STYLE directamente en la entrada.

Responder
saccperuano  

Oh x dios todo se me automatizo THAN YOUUUUUUUUUUUUUUUUU Gracias de verdad, ah no ahora agarro con mas ganas codigo, que rico es el poder del codigo fuente, de verdad todo un mundo x descubrir gracias maestro, de verdad muy agradecido, esto me motivo mas a querer dominar aun mas a la perfeccion codigo, xq es increible las cosas que se puede hacer
Una vez mas saludos desde Lima PERU
than you Se paso chee ;) Grande VOS

Responder
JMiur  

Me alegro que eso sirviera :D

Responder
Lavinia  

Hola.
Hace un tiempo que miro tu blog para resolver algunos problemillas en el mio.
ante todo decirte que no tengo ni idea, pero que con tu ayuda he logrado hacer cuatro cosillas, para mi importantes.
Verás, el texto de todas las entradas del blog, me quedan muy cerca, o en el mismo borde y quisiera separlo de los bordes (ajustandolo?) más o menos como oo tienes en tu blog.
Donde y como puedo hacer esto?
Gracias por la estupenda ayuda que nos brindas.
Un saludo.

Responder
JMiur  

Lavinia: Deberías decirme la dirección de tu blog para verlo online.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR