css - texto - centrar verticalmente dentro de div

Centrar los elementos de la lista flotante<li> dentro de un div o su<ul>

Question

HTML:

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>  

Estoy codificando una página de galería simple creando una lista desordenada y cada elemento de la lista contiene una imagen.

    ul li {
        float: left;
    }

Configuro el ancho del contenedor como "ancho máximo" para poder ajustar los elementos de la lista (imágenes) al ancho del navegador ... lo que significa que se reorganizarán cuando la ventana del navegador cambie de tamaño.

    .imgcontainer{
        max-width: 750px;
    }

Ahora el problema es que las imágenes o los elementos de la lista no están alineados con el centro, están alineados a la izquierda del cuerpo del contenedor .img (color gris en el enlace adjunto a continuación), ¡dejando un espacio a la derecha cuando la ventana cambia de tamaño!

¿Cómo puedo centrar esas imágenes cada vez que la ventana cambia de tamaño?

Aquí está la página / código completo que puede previsualizar o editar en JS Bin

http://jsbin.com/etiso5

Answer 1

Elimine float:left y use display:inline para que pueda usar text-align:center . Establezca el tamaño de fuente en cero para que no tenga espacios en blanco entre las imágenes.

ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

El zoom es un truco para las versiones antiguas de IE. Sin embargo, esto no es una propiedad de CSS válida, por lo que no pasará por el validador W3C.

Answer 2

Esto supone que todos los elementos tienen el mismo ancho. Si no desea que la última fila de elementos se centre, puede lograr esto con unas pocas líneas de JavaScript. Deshazte del bloque en línea, del centro de alineación de texto, simplemente flota los elementos de tu lista y coloca un margin: 0 auto en el contenedor de la lista.

En el lado JS de las cosas, calcule el ancho de su panel de contenido o ventana, a continuación, determine cuántos elementos puede colocar en una fila, es decir, el ancho del elemento contenedor de la lista, y luego establezca ese ancho. itemWidth aquí asume el ancho + margen + relleno + borde de cada elemento de la lista.

var centerListItems = function (itemWidth) {
  var $paneWidth = $(''#my-content'').width(),
      setWidth;

  setWidth = parseInt(($paneWidth / itemWidth), 10) * itemWidth;

  $(''#my-list'').width(setWidth);
}

Si desea que cambie cuando se cambia el tamaño de la ventana o se cambia la orientación, puede usar underscore.js para rebotar la llamada.

var event;

if (''onorientationchange'' in window) {
  event = ''onorientationchange'';
} else {
  event = ''resize'';
}

$(window)
  .off(event)
  .on(event, _.debounce(function () {
    centerListItems(itemWidth);
  }, 350));