JMiur [E]

Alinear cosas verticalmente siempre es complicado y es algo que se vuelve más engorroso cuando tenemos varios elementos que queremos colocar uno al lado del otro agregándoles la propiedad float pero, como tienen diferente altura se mostrarán alineados en su parte superior:

Curabitur sed mauris purus, pulvinar dictum metus.

Hola

Pulvinar dictum metus.


Es verdad que podemos usar la propiedad margin para mover cada cosa a su lugar pero eso es molesto ya que hay que adivinar y probar. Lo mismo puede hacerse con tablas aunque son cosas que muchos evitan como a la peste.

El CSS posee otra posibilidad que es usar tablas sin tablas ya que entre los nuevos valores aceptados para la propiedad display, hay dos en particular que nos facilitan las cosas: display:table y display:table-cell sobre las que algua vez he hablado pero, sobre las que vale la pena seguir insistiendo ya que su uso no está muy difundido.

Primero, voy a definir dos clases; una para el contenedor y otra para el contenido:
<style>
  .contenedor {
    display:table; /* esta es la propiedad clave */
    /* todas las demás propiedades son optativas */
  }
  .contenido {
    display:table-cell; /* esta es la propiedad clave */
    text-align:center; /* esto centra el contenido horizontalmente */
    vertical-align:middle; /* esto centra el contenido verticalmente */
    /* todas las demás propiedades son optativas */
  }
</style>
Y uso un esquema así:
<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>
Coloco un elemento:

Curabitur sed mauris purus, pulvinar dictum metus.


Coloco dos:
<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>

Curabitur sed mauris purus, pulvinar dictum metus.

Pulvinar dictum metus.


Coloco tres:
<div class="contenedor">
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
  <div class="contenido">  ....... cualquier contenido ....... </div>
</div>

Curabitur sed mauris purus, pulvinar dictum metus.

Hola

Pulvinar dictum metus.


Y todo se irá alineando sólo, sin necesidad de saber previamente cuales son los tamaños. Mejor aún, esto es algo que funcionará en cualquier navegador, incluyendo IE8.

8 comentarios:

Julio C. Vega Sanchez  

Saludes,me interesa lo que no entiendo es donde se pone.

Saludes

Responder
Belleza del dia  

Perdon por comentar aqui, te escribo para saber si conoces la relacion que hay entre los blogs de blogger con advertencia de contenido y el mal funcionamiento de la estadisticas de la entradas y del gadget de post mas populares, gracias por la inmensa ayuda que haces , un saludo.

Responder
Manfenix  

Simplemente, utilísimo.
Gracias, :)

Responder
JMiur  

Julio C. Vega Sanchez:
El CSS con el resto del CSS, el HTML donde se quiera utilizar.

Belleza del dia:
No; lo desconozco por completo. No creo que haya relación entre ambas cosas; al menos, el sentido común diría que no debería haberlas.

Responder
Campamento Web  

¡tienes premio en mi web! :D
www.campamentoweb.co.cc
no suelo comentar pero me encanta tu pagina. la visito siempre!

Responder
Graciela  

Muy bueno Jmiur :P
ando
- descolocada como tiembre de panteón, no con ésto, sino con todo lo nuevo de Blogger jejeje
- atrasada, leyendo las entradas y sin tiempo
- no entendiendo un 'sorongo' cómo siempre!
te acordás de esa palabra??? jajaja

Responder
Belleza del dia  

Me han comentado otras personas con blogs de esta tematica que tienen el mismo problema, yo tampoco termino de entenderlo pero asi es, gracias por la respuesta, saludos

Responder
Giuseppe Beghelli  

Este sitio es mi biblia, cada dia aprendo algo muy interesante. Gracias

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