Incompatibilidad CSS Firefox alineado vertical

Ciel · #1 (**permalink**) 02/11/2012, 08:40

Hola que tal,

Les cuento que tengo un problemita de incompatibilidad y quisiera saber cual puede ser la solucion mas viable o alguna alternativa para lograr lo que quiero. Hasta estas alturas todavia no logro encontrar una forma sencilla y perfecta de lograr una alineacion centrada verticalmente.

Me decante por usar lo siguiente de CSS3:

Código CSS:

Ver original.vcenter {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
 
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Y el resultado (en Chrome) como lo veran va bien:

(usado en la barra de arriba de todo)

Sin embargo el problema es cuando lo abro desde Firefox (ultima version) con lo cual obtengo este resultado:

(no me lo centra correctamente y aparte me agrega un especie de linea rara arriba de todo)

En fin, me deberia olvidar de usar estas nuevas propiedades del CSS3 para centrar verticalmente un objeto? Que propiedades deberia usar y como? Alguna solucion o alternativa?

Gracias de antemano.
Saludos.

tutorias · #2 (**permalink**) 02/11/2012, 13:49

Un saludo. Asi es, usa la propiedad vertical-align:top y ajusta width y margin a lo que necesites

Espero que esto te sirva:

Código HTML:

<!DOCTYPE html>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>@tutorias</title>
  <style type="text/css">
    .section{
      vertical-align: top;
    }
    .article{
      border        :1px solid #ccc;
      display       : inline-block;
      max-width     : auto;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <!-- bloque -->
  <div class="section">
    <div class="article">
      espacio uno
    </div>
    <div class="article">
      espacio dos
    </div>
    <div class="article">
      espacio tres
    </div>
  </div>
  <!-- otro bloque -->
  <div class="section">
    <div class="article">
      <img src="image.jpg" width="100" alt="" />
    </div>
  </div>
</body>
</html>

emprear · #3 (**permalink**) 03/11/2012, 06:18

@ciel. las imágenes no se ven.
Que se supone que es lo que se quiere centrar?
Y cual es el html correspondiente a ese css?

SAludos