Wie kann ich meine footer-center, um unten auf der Seite?

Ich habe Probleme mit der Zentrierung meinem footer an den unteren Rand der Seite. Hier ist mein code

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 400px;
text-align: center;
}
<footer align="center">
    <p>March 25, 2</p>
</footer>
  • Können Sie liefern den code für die komplette Seite, oder zumindest ein wenig mehr als das? Zum Beispiel, was, wenn überhaupt, ist Ihre Fußzeile eingewickelt in?
  • Sie möchten container footer zu zentrieren oder was footer-tag-center? Versuchen Sie, Bild der Blick u wollen.
  • Und durch "Zentrierung meinem footer an den unteren Rand der Seite" meinst du, zentrieren von text oder Zentrierung der container ? Oder beides?
  • Ich möchte, um die Mitte der container
InformationsquelleAutor Diallo Dickerson | 2013-03-26
  1. 15

    Nur Breite festlegen zu 100%

    width: 100%;
    • Danke. Funktionierte perfekt.
    • Sie sind willkommen, wenn Sie fanden Ihre Antwort dann akzeptieren Sie als Antwort.
    InformationsquelleAutor Nasir Mahmood
  2. 1

    Shabbir Lakdawala Antwort ist eine option, aber umhüllen Sie haben floated element in Ihrem footer fügen Sie einfach 'div' wrapper

    html

    <div class="footerWrap">
    <div class="footer">
      <div class="footerContent">
        <p>Lorem Ipsum dolor</p>
      </div>     
    </div>
</div>

    css

    .footerWrap {
    width:100%;
    position:fixed;
    bottom: 0px;
}
.footer {
    width:400px;
    margin:auto;
}
.footerContent {
    float:left;
    width:100%;
    background-color:#555;
    padding:20px 0;
}
.footer p {float:left; width:100%; text-align:center; }

    arbeiten demo

    InformationsquelleAutor jhunlio
  3. 0

    ODER Sie können Ihre Fußzeile einen Behälter und verwenden Sie diesen code:

    HTML :

    <footer>
    <div class="footer">
    lorem ipsum dolor
    </div>
<footer>

    CSS:

    footer{
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer {
    background: blue;
    height: 100px;
    margin: auto;
    width: 400px;
    text-align:center;
    padding:10px;
    color:#ffffff;
}

    Link zu der Geige : http://jsfiddle.net/qdVbR/174/

    InformationsquelleAutor Shabbir Lakdawala
Schreibe einen Kommentar