Vertikal ausrichten Fußzeile Inhalt

So, ich hatte Hilfe von vorher, aber mein Zeug war so unorganisiert, dass es war schwer für mich zu verstehen, was jemand tut. Sie verließ mich hier ab, ich habe meine vertikale Ausrichtung, aber nun ist mein footer aus irgendeinem Grund schneidet die Hälfte Weg und meine social-icons bleiben direkt neben meiner angetrieben durch, auch wenn Sie angenommen werden, ausgerichtet/floating auf der rechten Seite...

http://jsfiddle.net/4KDEM/

HTML

<div id="footer">
 <div id="footerContent">
 <div id="leftFooter">
 $POWERED_BY$
 </div>
 <div id="rightFooter">
 <a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a>
</div>
</div>
</div>

CSS

#footer {
 background-image:url('/images/footer_bg.png');
 bottom repeat-x;
 height: 110px;
 display:table-cell;
 vertical-align: middle;
}
#footerContent {
 display:table;
 width:100%;
}
#leftFooter {
 float: left;
 font-family:maven;
 font-size: 15px;
 padding-left: 20px;
}
#rightFooter {
 float: right;
 text-align:right;
}

InformationsquelleAutor Zevoxa | 2013-05-15

  1. 2

    Kann man das layout durch eine entsprechende Einstellung Ihrer CSS wie folgt:

    #footer {
    background-image:url('http://zevoxa.com/images/footer_bg.png');
    bottom repeat-x;
    width:100%;
    height: 110px;
}
#footerContent {
    display:table;
    width: inherit; /* You can adjust this depending on other design factors*/
    height: inherit;
}
#leftFooter {
    display:table-cell;
    vertical-align: middle;
    font-family:maven;
    font-size: 15px;
    padding-left: 20px;
    border: 2px dotted yellow; /* just to show where the edges are*/
}
#rightFooter {
    display:table-cell;
    vertical-align: middle;
    text-align:right;
    border: 2px dotted yellow;
}

    Sehen Fiddle: http://jsfiddle.net/audetwebdesign/Pfrj8/

    Set #footerContent zu display: table und Erben die Höhe vom übergeordneten element (#footer). Sie können die Breite in einer Vielzahl von Möglichkeiten, je nachdem, was Sie brauchen. In meinem Beispiel, habe ich es auf volle Breite, Standard-Verhalten.

    Für die beiden Kind-Elemente, setzen Sie Ihre display-Typ table-cell und vertical-align: middle haben Sie schon text-align setzen der richtige Weg. Standardmäßig die zwei Zellen von gleicher Größe, 50% der Eltern der Breite.

    Keine Notwendigkeit für Schwimmer.

    Beiseite

    Müssen Sie möglicherweise nicht die zwei Wrapper #footer und #footerContent es sei denn, Sie brauchen die zweite div-für andere Zwecke (zusätzliche hintergrund-Bild für Beispiel). Abhängig von anderen Faktoren in Ihrem design. (Siehe das zweite Beispiel in fiddle.)

    Wenn ich nicht brauchen #footerContent, dann würde ich eventuell width: inherit; height: Erben;?
    Sorry, was ich meine ist, müssen Sie möglicherweise nur #footerContent oder #footer. Sie können die Breite, Höhe, display, hintergrund-Eigenschaften in einem einzigen div-Element, aber wie ich schon sagte, dies ist optional, hängt davon ab, was Sie tun möchten. So oder so ist gut. Ich aktualisiert die Geige mit einem zweiten Beispiel deutlich machen.

    InformationsquelleAutor Marc Audet

  2. -1

    Wenn Ihre Website ist nicht eine responsive Website, die Sie gerade brauchen, um geben Sie eine Breite in etwa so: #footer {width:500px;}

    InformationsquelleAutor ArleyM

Schreibe einen Kommentar