Question

Cuando quieres centrar una imagen dentro de un div suele bastar con esto:

text-align: center;     
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;       
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Esto centra la imagen, tanto verticalmente como horizontalmente dentro del div en la mayoría de navegadores.

Pero imagínate que no es un div, si no varios y pueden ser 3 como 23 y los quieres ordenar en filas de 4, después de varias pruebas me di cuenta que si por ejemplo en vez ser 1 div son 2, la y tiene que ser 100% y si son 3 divs la y tiene que ser de 150% y 4 divs la y pasa a ser del 200%, pero claro, esto es algo que yo no se, ya que los divs se crean en relación al tamaño de la cantidad de elementos de la base de datos y puede variar, y de echo varia según se escoge una opción u otra. La X no me preocupa tanto ya que puedo ir creando divs padres que abarquen cada linea con lo que me interesa es la horizontal (Y), no la vertical (X), pero imagino que es lo mismo:

1 --> 50%
2 --> 100%
3 --> 150%
...

Entonces si no puede ser por simple CSS, con la ayuda jquery ¿hay alguna manera que yo pasandole el numero de elementos (divs) calcule la Y y la X?

Comments

Por favor agrega tu HTML a la pregunta para ver a que te refieres y como se tendría que aplicar el CSS.

Saludos.

---

while($consulta = mysql_fetch_assoc($result)) 
            {       
                $pelicula = $consulta['pelicula'];
                $cartel = $consulta['cartel'];
                $cartel_p = $consulta['cartel_p'];
                $ano = $consulta['ano'];            

                if(!empty($pelicula) && $pel<= 4)  
                {
?>              
                    <div id="pelicula">                             
                        <a href="../imagenes/peliculas/<?php echo $cartel; ?>" rel="lightbox" title="<?php echo $pelicula; ?>">
                           <img src="../imagenes/peliculas/<?php echo $cartel_p; ?>" height="220px">
                        </a>

                        <br>        

                        <?php echo $pelicula; ?> (<?php echo $ano; ?>)
                    </div>              
<?php       
                    $pel++;
                }
                else 
                {
                    $pel = 1;

                }
        }

La consulta muestra los carteles de película y debajo el nombre y el año dentro de un div (película), un div por película. Los carteles se muestran 4 por fila. antes de esto hay hay un menú donde eliges la el ciclo, por ejemplo películas de miedo o en blanco y negro y según la elección la consulta busca unas películas u otras. si el numero de películas es 7, debería mostrar una fila con 4 carteles y a continuación otra fila con 3 carteles, normalmente, este tipo de alineaciones mostraría los carteles de la segunda fila alineados a la izquierda, pero yo quiero que los centros, porque hay ciclos que solo tienen una o 2 películas y si los alinea a la izquierda visualmente no queda bien.

CSS de pelicula:

#pelicula
    {
        text-align: center;     
        vertical-align: middle;
        position: relative;
        width: 25%;
        height: 255px;
        top: 25%;
        float: left;    
        left: 50%;       
                -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

X hace referencia a la alineación horizontal, en mi anterior comentario me equivoque.

Si en la segunda fila solo hay carteles el porcentaje de X para que quede centrado debería ser -150%

Espero que se entienda mejor lo que pregunto

---

Debo estar entendiéndolo mal porque con el siguiente código css se hace una rejilla de 4 columnas:

.pelicula
{
    text-align: center;     
    vertical-align: middle;
    position: relative;
    width: 25%;
    height: 255px;
    top: 25%;
    float: left;    
}

Un ejemplo en funcionamiento: https://jsfiddle.net/c8je5ew1/

---

Pues tu ejemplo me viene muy bien, para que se entienda mi problema, fíjate que el ultimo div el de la I esta a la izquierda y yo lo quiero centrado.

Por cierto desconocía esa web, y veo que es muy practica.