comment centrer un pied de page sur une page Web

Question

Je veux centrer mon pied de page Web et créer un coup raisonnable entre le contenu ci-dessus et le contenu ci-dessus. Actuellement, le pied de page a une ligne et un paragraphe joints au contenu ci-dessus. Je peux pousser le contenu mais la ligne ne bouge pas. Je suis sûr que la propriété que je manque dans ma feuille de style css. Quelqu'un pourrait-il aider?

Ceci est ma marque html jusqu'à:

<div id="footer"> 
    <p>Copyright (c) 2010 mysite.com All rights reserved</p> 
</div> 

Quelle propriété css puis-je utiliser pour résoudre ce problème? Un échantillon serait apprécié. Merci.

Answer 1

Centrer un div horizontalement? Habituellement, en définissant margin: 0 auto, ou margin-left: auto, margin-right: auto.

Et si vous voulez un espace au-dessus, donnez-lui une marge supérieure.

Answer 2

#footer{ 
text-align:center 
} 

Answer 3

Utilisation margin: auto au centre des blocs avec CSS et margin-top ou padding-top pour faire un écart au-dessus:

#footer { 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:2em; 
} 

Je l'ai utilisé 2em pour la marge supérieure; n'hésitez pas à changer ce que vous voulez, même à une taille de pixel fixe si vous préférez. Vous pouvez également utiliser padding-top ainsi que ou à la place de margin-top, en fonction de ce que vous devez réaliser, bien que le centrage ne puisse être effectué qu'avec une marge gauche/droite, pas de remplissage.

Le code ci-dessus peut être condensé en utilisant le code de marge raccourci, ce qui vous permet de les énumérer tous dans la même ligne de code:

#footer { 
    margin: 2px auto 0 auto; 
} 

(séquence est haut, à droite, en bas, à gauche)

espérons que cela aide.

Answer 4

Vous pouvez centrer le texte avec le CSS suivant

#footer { 
    margin: 0 auto; 
} 

Si vous voulez plus d'espace au-dessus ajouter

margin-top: 2em; 

après la ligne de marge précédente. Notez que l'ordre est important, donc si vous avez margin-top, il est remplacé par la règle margin.

---

espacement vertical vide au-dessus du pied de page peut également être faite en utilisant

padding-top: 2em; 

La différence entre margin et padding peut être lu sur W3C's CSS2 box model. Le point principal est que margin fait l'espace au-dessus de la frontière de l'élément div comme padding fait l'espace à l'intérieur le div. La propriété à utiliser dépend des propriétés des autres éléments de page.

Answer 5

Je l'ai résolu avec ceci:

#footer { 
width: 100%; 
height: 28px; 
border-top: 1px solid #E0E0E0; 
position: absolute; 
bottom: 0px; 
left: 0px; 
text-align: center; 
} 

Answer 6

#footer{ 
    display: table; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 7

.copyright { 
    margin: 10px auto 0 auto; 
    width: 100%; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 10px; 
    font-style: normal; 
    text-align: center; 
    color: #ccbd92; 
    border-top: 1px solid #ccbd92; 
}