Pregunta

Tengo 5 páginas HTML con el mismo código. Digamos que este es el código:

<div id='generic'>
</div>

Las 5 páginas se enlacen al mismo archivo CSS externo que es solo esto:

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

En cada una de las 5 páginas, inserté una tabla, como

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

La tabla solo tiene una fila. En una fila, necesito elegir un número aleatorio de 1-10, y eso es cuántos TD tendrá la fila. Por lo tanto, la primera página HTML puede tener 2 TD, la segunda puede tener 6TD, etc. Necesito hacerlo para que la posición vertical de la tabla sea la misma en todas las páginas, pero la tabla debe estar alineada horizontalmente. Tengo que usar la posición absoluta ya que otros usuarios pueden escribir algunos párrafos antes que la tabla en algunas páginas, y en algunas páginas, es posible que no haya ningún párrafo adicional, por lo que para que yo tenga la misma posición vertical de la tabla, necesito posición absoluta. ¿Cómo lo hago para que cada mesa esté centrada horizontalmente? Al alineada horizontalmente, quiero decir que cada mesa tiene una cantidad uniforme de espacio en blanco a la izquierda y a la derecha, independientemente de cuántos TD tenga la tabla.

margin: 0 auto;

no funciona para mí. Tenga en cuenta que no estoy usando CSS3 y estoy usando IE8.

¿Fue útil?

Solución

margin: 0 auto No funcionará para elementos posicionados absolutos. Lo que debe hacer es una posición absoluta en el medio. Lo logras moviéndolo dejó al 50%; y luego ajustó el margen izquierdo a la mitad negativa del ancho de los elementos

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

Esto lo centrará en el medio de su padre

PD. Asegúrese de que la posición de los contenedores principales esté configurado como relativo

http://jsfiddle.net/s7gmm/3/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top