2011-09-12 13 views
5

Tengo una pregunta muy simple, creo. Tengo un footer.php que puse en mi página principal y en todas las páginas secundarias (para hacerlo más fácil, así puedo cambiar el pie de página en una ubicación). Y trato de hacerlo para que el pie de página permanezca en el centro del ancho fijo sin importar el tamaño de la ventana del navegador. Por ejemplo, quiero que mis páginas tengan un ancho de 950px y el pie de página siempre esté en el centro, de modo que incluso cuando cambie el tamaño del navegador a lo más pequeño, simplemente CUBRE el pie de página, en lugar de moverlo con la ventana redimensionada. Muy parecido al pie de página de apple.com.Ayuda de centrado de pie de página

Gracias por su ayuda

+0

Pregunta bien descrita para un novato. +1 :) – Akos

Respuesta

3

En su margen de beneficio:

<div id="footer-container"> 
    <div id="footer"> 
     Footer stuff 
    </div> 
</div> 

Y en tu CSS:

#footer-container { 
    /* centering for IE */ 
    text-align: center; 
} 
#footer { 
    width: 950px; 
    /* undo text-align on container */ 
    text-align: left; 
    /* centering for other browsers */ 
    margin: auto; 
} 


Editar: yo estaba poniendo este comentario sobre algunas de las otras soluciones, pero borré porque yo no' Quiero copiar/pegar en todos ellos. Solo tenga en cuenta que margin: auto no funciona en las versiones anteriores de IE, por lo que si desea tener el pie de página alineado en el medio, tendrá que anidar, como en este caso.

+2

Advertencia justa es solo IE6 que no admite eso, cada vez que soportas IE6 Dios mata a un cachorro –

+1

Eso puede ser cierto, pero cada vez que no soporto IE6, mi jefe mata a dos cachorros. : \ – jmar777

+0

Impresionante, gracias por todos los consejos rápidos. Funcionó PERFECTAMENTE. Tengo curiosidad, ¿cómo se podría centrar una imagen en lugar de solo texto bajo este mismo contexto? –

1

Basta con establecer el width: 950px y margin-left:auto; margin-right:auto;.

Con los márgenes izquierdo/derecho en auto, se centrará el <div>. Una vez que el tamaño del navegador se reduce al punto donde se necesita desplazamiento, el navegador no reducirá su <div>, solo requerirá desplazamiento hacia la izquierda/derecha, lo cual es necesario para su contenido de todos modos.

6

sólo tiene que establecer el width de su pie de página y luego darle una margin:0 auto donde 0 stands para los márgenes superior e inferior y auto es para la izquierda y la derecha.

1

Creo que se podría resolver con un poco de CSS:

html php &:

<div id="footer"> 
<?php include("footer.php"); ?> 
</div> 

CSS:

#footer { 
margin: 0 auto; 
text-align: center; 
} 

Espero que esto ayude! :)

Cuestiones relacionadas