So zentrieren Sie ein Footer div auf einer Webseite

Ich möchte meinen Web-Seitenfuß zentrieren und einen vernünftigen Text zwischen ihm und dem obigen Inhalt erstellen. Zur Zeit enthält die Fußzeile eine Zeile und einen Absatz, die mit dem obigen Inhalt verbunden sind. Ich kann den Inhalt nach unten drücken, aber die Linie bewegt sich nicht. Ich bin mir sicher, dass die Eigenschaft, die ich in meinem CSS-Stylesheet verpasse. Könnte jemand helfen?So zentrieren Sie ein Footer div auf einer Webseite

Das ist mein HTML Auszeichnungs:

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

, welche CSS-Eigenschaft kann ich dieses Problem zu lösen, verwenden? Eine Probe würde geschätzt werden. Vielen Dank.

Quelle

2010-10-25 ibiangalex

Können wir Ihren gesamten Code zu sehen? Ich bin sicher, dass ich Ihr Problem in 5 Minuten lösen kann, wenn ich den Code sehen kann. – Nealv

Center ein div horizontal? Normalerweise erfolgt dies durch Einstellen von margin: 0 auto oder margin-left: auto, margin-right: auto.

Und wenn Sie eine Lücke darüber wollen, geben Sie ihm einen oberen Rand.

Quelle

2010-10-25 08:24:54 Bal

Blockelemente nehmen die gesamte verfügbare Breite, ohne sie zu spezifizieren, können Sie sie nicht zentrieren, aber dort Inline-Kinder mit Text: align: center; – MatTheCat

Hallo, könnte mir bitte jemand sagen, warum die Fußzeile auf einer Seite richtig funktioniert und auf der anderen Seite erscheint sie in der Mitte der Webseite und vermischt sich mit Daten. – ibiangalex

Möglicherweise möchten Sie eine separate Frage für diese Situation erstellen, mit genügend Erklärungen. Sie sollten auch in Erwägung ziehen, eine Antwort auf diese Frage zu akzeptieren. – Jawa

-1

#footer{ 
text-align:center 
}

Quelle

2010-10-25 08:23:37 nerkn

das wäre #footer - das div hat eine ID von footer, nicht eine Klasse –

alles, was tun würde, ist der Text ausrichten, nicht das div selbst. –

Verwendung margin: auto Blöcke mit CSS zu zentrieren, und margin-top oder padding-top eine Lücke darüber zu machen:

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

I 2em für den oberen Rand verwendet haben; Fühlen Sie sich frei, das zu ändern, wie Sie möchten, sogar zu einer festen Pixelgröße, wenn Sie bevorzugen. Sie können auch padding-top sowie oder anstelle von margin-top verwenden, je nachdem, was genau Sie erreichen müssen, obwohl die Zentrierung nur mit dem Rand links/rechts erfolgen kann, nicht mit dem Auffüllen.

Der obige Code kann mit dem Stenographie Marge Code, kondensiert werden, die Sie sie alle in der gleichen Zeile Code-Liste kann:

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

(Sequenz ist oben, rechts, unten, links)

hoffe das hilft.

Quelle

2010-10-25 08:25:04 Spudley

#footer nicht .footer –

@Mark - oops. repariere das. Danke :) – Spudley

Ich habe diesen neuen Vorschlag nicht aufgenommen, aber basierend auf dem, was ich früher eingereicht habe, fand ich in der Fußzeile ist auf einer Seite zentriert und auf der anderen Seite, die große Tabelle von Daten hat, ist die Fußzeile nicht am Ende der Seite sondern in der Mitte der Daten. Was könnte der Kurs sein? – ibiangalex

Sie können

#footer { 
    margin: 0 auto; 
}

den Text mit der folgenden CSS-Center, wenn Sie auf mehr Platz wünschen

margin-top: 2em;

nach der vorherige Randlinie hinzufügen. Beachten Sie, dass die Reihenfolge wichtig ist. Wenn Sie also margin-top haben, wird sie zuerst durch die Regel margin überschrieben.

mehr leerer vertikaler Abstand oberhalb der Fußzeile kann auch

padding-top: 2em;

Der Unterschied zwischen margin und padding Verwendung gemacht werden kann W3C's CSS2 box model zu lesen. Der Hauptpunkt ist, dass margin Platz über der div Element Grenze als padding macht Platz innerhalb der div macht. Welche Eigenschaft verwendet werden soll, hängt von den Eigenschaften anderer Seitenelemente ab.

Quelle

2010-10-25 08:27:58 Jawa

Ist Margin-Top anders als Padding-Top? wäre padding-top in diesem fall nicht mehr anwendbar? – Anurag

Der Rand liegt außerhalb des #footer-Elements, die Füllung ist darin. –

ich es mit diesem gelöst:

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

Quelle

2010-10-25 08:40:52 ibiangalex

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

Quelle

2012-12-04 07:42:56

Während Code-Only-Antworten das Problem lösen können, ist es viel besser, eine Erklärung zu geben. –

-1

.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; 
}

Quelle

2014-05-10 19:42:36 aa04

So zentrieren Sie ein Footer div auf einer Webseite

Antwort

Verwandte Themen