Tabla HTML: mantenga la alineación central, independientemente del ancho del navegador

Esta es una continuación de una pregunta SO anterior Imagen de fondo de repetición de CSS de anclaje pero suficientemente diferente para tratar como una cuestión separada.

El violín js http://jsfiddle.net/By2xj/ demuestra el concepto. Tengo una imagen de banner (centro) que luego requiere imágenes repetidas a la izquierda y a la derecha que se mostrarán y repetirán según el ancho de la ventana del navegador. La condición es que las imágenes izquierda y derecha deben bloquearse en el borde de la imagen del banner central. Puede ver este efecto si expande la ventana de resultados de jsFiddle: las imágenes repetidas izquierda y derecha siempre permanecen bloqueadas al lado de la imagen central del banner y se expanden desde ese punto.

Entonces, todo esto funciona, pero he usado una tabla para lograr este efecto, ya que el CSS sugerido en la pregunta anterior de Stack Overflow no funcionó completamente y dependía un poco del navegador, particularmente no jugar con navegadores más antiguos.

Con esta solución basada en tablas, me gustaría mantener siempre centrada la imagen del banner central, incluso cuando el ancho del navegador es más pequeño que el banner. Si reduce el tamaño de la ventana de resultados de jsFiddle, verá que cuando el ancho del navegador es más pequeño que el banner, el banner se alinea a la izquierda en lugar de estar centrado.

Entonces, mi pregunta es ¿cómo puedo mantener siempre alineado el centro del banner central (o quizás, más correctamente, todo el centro de la tabla alineado), incluso cuando el ancho del navegador es más pequeño que el ancho del banner (y la celda de la tabla contenedora)?

preguntado el 01 de julio de 12 a las 06:07

¿El banner es solo una imagen? Puede configurarlo en un background-image: jsfiddle.net/userdude/YgJh9 -

3 Respuestas

Es un poco trampa, pero espero que sea lo que estás buscando.

http://jsfiddle.net/By2xj/8/

lo que sucede es que estoy creando un div en esa celda del medio, y la posición absoluta, después de eso, centrándolo en la pantalla. ese div permanecerá centrado todo el tiempo, independientemente del tamaño de la ventana del navegador.

para el registro:

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

CSS:

 #banner-table {

    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

#left-image {
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
    background-position: right;
    background-repeat: repeat-x;
}

#center-image {

    width:400px;


}
#center-image div {
    top:0; left:50%;
    margin-left:-200px;
    width:400px;
    height:200px;

    position:absolute;
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
    background-position: center;
    background-repeat: no-repeat;
}
#right-image {
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
    background-position: center center;
    background-repeat: repeat-x;}​

Respondido 01 Jul 12, 07:07

Gracias, esto es genial y funciona exactamente como se requiere. Sin embargo, un poco de extrañeza: en mi página real (no en jsFiddle), dependiendo del ancho de la ventana del navegador, hay una brecha de 1 o 2 píxeles entre el borde central del gráfico y los gráficos repetidos izquierdo y/o derecho. Supongo que tiene algo que ver con poner el gráfico en un div en vez de td sí mismo. ¿Algunas ideas? - Skoota

Tacha eso, mi culpa. Sólo tenía que ajustar el ancho de la td :) - Skoota

Podrías deshacerte de las tablas e ir con algo como esto:

http://jsfiddle.net/bryandowning/f2unW/

Respondido 01 Jul 12, 06:07

Gracias por la sugerencia, pero el gráfico de la izquierda ya no está bloqueado en el lado derecho del gráfico central. Sin embargo, si tiene alguna otra sugerencia sin mesa, ciertamente la agradecería :) - Skoota

Gracias por la actualización :) Realmente esperaba que esto hiciera el trabajo, pero desafortunadamente hay un problema importante que no era evidente en mi jsFiddle. En su implementación, los mosaicos de fondo izquierdo y derecho debajo del banner central; no puedo permitir que esto suceda, deben comenzar desde los bordes izquierdo y derecho del banner, respectivamente. Este jsFiddle muestra el problema: jsfiddle.net/cCEEV . ¿Supongo que no hay forma de evitar esto? :) - Skoota

Claro, todo lo que necesita hacer es modificar el background-position propiedad. Actualicé el violín de nuevo. En vez de left y right utilizar, -200px 0px para la izquierda y 200px 0px por el derecho - bryan bajando

Gracias por la actualización, Bryan, pero ahora la izquierda ya no está bloqueada en el lado izquierdo del gráfico central. Además, el lado derecho (y presumiblemente, el lado izquierdo también) solo parece estar funcionando porque las dimensiones de los gráficos son tales que pueden colocarse dos veces debajo del gráfico central antes de que parezca que está bloqueado en el lado del gráfico central. Las dimensiones de los gráficos reales son bastante diferentes y no permitirán que esto suceda: los gráficos izquierdo y derecho en realidad deben comenzar en los lados del gráfico central. - Skoota

¿Lo intentaste con tus gráficos? Debería funcionar bien independientemente de la complejidad del gráfico repetido. Cambiar el background-position valores a algo no divisible por 100 y verás lo que quiero decir. Es por eso que hice el gráfico central medio transparente. A menos que me esté perdiendo algo aquí. - bryan bajando

Necesitas editar tu código HTML como:

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

primero puede implementar esto sin ningún archivo CSS. Luego puede personalizar su código según sus requisitos.

Respondido 01 Jul 12, 09:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.