JMiur [E]

La alineación de las cosas es algo que siempre suele provocar confusiones, sobre todo cuando recién se comienza a meter mano en una página web. Si queremos que algo se vea a la derecha, a la izquierda o en el centro, parecería que no siempre debemos usar las misma propiedades, a veces usamos float, a veces usamos text-align, a veces ... no podemos.

En realidad, no es algo tan complejo si se entiende que una cosa es el contenedor y otra cosa es el contenido (más información).

En una etiqueta sencilla como P:
<p> el texto </p>
la etiqueta en si misma es el contenedor y el texto es el contenido; podemos alinear ese texto con left, right o center pero, la etiqueta P en si misma, no se "mueve". Es algo fácil de ver si le ponemos un borde o un color de fondo; en este ejemplo, la dimensiono de tal forma que mida 300 pixeles, agregándole la propiedad width:
<p style="text-align:center;width:300px;"> el texto </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Como se ve, lo que se centra es el contenido de la etiqueta, el texto, pero la etiqueta en si misma se ve a la izquierda que es lo que ocurre por defecto. Si quisiera centrarla, debería agregarle margin:0 auto:
<p style="text-align:center;margin:0 auto;width:300px;"> el texto </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Hasta ahí, parece fácil pero, si quisiera alinearla a la derecha, usando text-align sólo podría modificar la forma en que se ve el texto, la etiqueta, continuaría viéndose a la izquierda. Usando margin: 0 auto podría centrarla pero, no habría forma de alinear la etiqueta P a la derecha a menos que le agregara un margin-right con un valor extremo que tal vez, desconozca:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Para colocar la etiqueta a la derecha, debería agregarle float:right:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


En resumen, en todos los casos, usando text-align right, left o center, puedo definir la alineación del texto (el contenido) pero eso no afectará, la alineación de etiqueta en si misma (el contenedor) que se debe establecer de modo separado agregándole propiedades extras como float left o right y ya que no existe un float:center, uso margin:0 auto si lo quiero centrar.

Pero ...

Los nuevos navegadores están agregando algunas opciones extras a esos valores que requieren el uso de prefijos:
-moz-left, -moz-center y -moz-right en Firefox
-webkit-left, -webkit-center y -webkit-right en Chrome
-ms-left, -ms-center y -ms-right en IE10
Parecen lo mismo pero obviamente, no lo son, la diferencia fundamental es que esos valores, no sólo afectan al contenido sino también al contenedor con lo que, de alguna manera, la diagramación puede simplificarse ya que evita los problemas que suele tener el uso de float.

Esto no significa que podemos hacer algo así para centrar el texto y la etiqueta:
<p style="text-align:-moz-center;width:300px;"> el texto </p>
sino que deberíamos usar algo así:
<div style="text-align:-moz-center;text-align:-webkit-center;text-align:-ms-center;">
  <p style="width:300px;"> el texto </p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Lo mismo si quisiéramos alinearlo a la derecha y a partir de ahí, el texto ya es independiente así que podemos alinear la etiqueta P a la derecha y centrar su contenido:
<div style="text-align:-moz-right;text-align:-webkit-right;text-align:-ms-right;">
  <p style="text-align:center;width:300px;"> el texto </p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

10 comentarios:

Adrián J. Messina  

Interesante el tip, se podría utilizar en esas plantillas tipo magazine y funcionaría perfectamente.

Abrazo procer.

Responder
Emilio Cobos Álvarez  

A mi no me parecen necesarias...Creo que es complicarse la vida. De todas maneras bienvenidas sean si son de utilidad para alguien.

Tengo una pregunta: ¿Si por algún motivo estas propiedades pasaran a ser estándar, cómo pasarían a llamarse?

P.D: en el ejemplo de "-moz-right" está mal puesta la propiedad webkit ;) .

Responder
Beben Koben  

we have to attention for one thing...
dir="ltr"
;)

Responder
JMiur  

Sí, Adrián, eso mismo pensaba.

Emilio Cobos Álvarez
No tengo idea de cómo se llamarían, no sé si alguien lo sabe o si está decidido.
Por el contrario, si son necesarias y muy útiles ya que el uso de float descompagina la forma natural en que se estructura el DOM de una página y este tipo de propiedades, resolvería el tema.

Responder
Emilio Cobos Álvarez  

Sí, pero para eso tenemos los clears no?

Yo no lo veo así, seguro que se me está escapando algo...

Responder
JMiur  

No necesariamente. Depende de la situación exacta y cuando algo flota, generalmente requiere que se definan más cosas tanto en esa etiqueta como en la etiqueta inmediata; suele generar problemas con bordes, fondos, márgenes, etc ya que, como dije, float quita ese bloque del flujo natural de la página misma.

De todas maneras, las herramientas nunca sobran ni faltan porque no son ni buenas ni malas, eso depende pura y exclusivamente de quien las usa y de cómo las usa.

Emilio Cobos Álvarez  

Tras unos cuantos meses he vuelto a esta entrada, he aprendido leyendo mucho, practicando, y mirando las hojas de estilo de los navegadores, y te doy toda la razón en lo de los floats. De todas formas, no podemos ampararnos en estos valores, porque no son parte de ninguna especificación, sino una forma de emular el comportamiento de etiquetas como <center> en netscape.

Gracias por haber sido paciente conmigo y por compartirte ;)

Responder
€mpregodinheiro  

Parabéns, grande explicação muito útil, obrigado.

Responder
Alejandro  

Muy interesante.
Sin embargo, el hecho de que haya que crear un div que envuelta el 'p' no nos lleva a un exceso de divismo??

JMiur  

Contenedor y contenido. Es absolutamente normal.

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