Frage von Croghs, 40

HTML liste mittig ausrichten?

Hallo Community, ich habe einen footer mit einer Liste erstellt, die ab 800px mittig und nebeneinander dargestellt werden soll. Das nebeneinander funzt schon, aber das Mittig noch nicht. Nun meine Frage, wie ich das hinbekomme...

 <footer class="footer">
    <div class="footercontent">
        <ul class="footerlist">
            <li class="footerpoint">
                <a href="about.html" class="footerlink about" title="Über uns">Über uns</a>
            </li>
            <li class="footerpoint">
                <a href="terms.html" class="footerlink terms" title="Datenschutzerklärung und Nutzungsbedingungen">Rechtliches</a>
            </li>
            <li class="footerpoint">
                <a href="help.html" class="footerlink help" title="Hilfe">Hilfe</a>
            </li>
            <li class="footerpoint">
                <a href="develop.html" class="footerlink develop" title="Entwicklung">Entwicklung</a>
            </li>
            <li class="footerpoint">
                <a href="donate.html" class="footerlink donate" title="Unterstützen">Unterstützen</a>
            </li>
            <li class="footerpoint">
                <a href="impressum.html" class="footerlink impressum" title="Impressum">Impressum</a>
            </li>
            <li class="footerpoint">
                <p class="footerlink copyright" title="Copyright"><i class="fa fa-copyright"></i> 2015 Stuport Dev.</p>
            </li>
        </ul>
    </div>
</footer>

@media (max-width: 800px) {

.footerpoint{
    line-height: 48px !important;
    display: block !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.footerlink {
    border-bottom: 2px solid #E2E2E2;
    width: 100%;
}

.footerlist {
    width: 100%;
    float: left;
}

.footer {
    padding-top: 5px;
}

.footercontent {
    box-sizing: border-box;
    margin: 0px auto !important;
}

}
.footer {
height: 35px;
background-color: transparent;
bottom: 0;
left: 0px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 2px;
}

.footercontent {
margin: 0px auto;
}


.footerlist {
margin-left: auto;
margin-right: auto;
border: none;
display: table;
}

.footerpoint {
width: auto;
line-height: 36px;
display: table-cell;
padding-left: 7px;
padding-right: 7px;

}

.footerlink {
text-decoration: none;
font-family: Source Sans Pro, sans-serif;
color: #A5A5A5;
font-weight: 400;
font-size: 15px;
float: left;
transition-duration: 0.2s;
}

.footerlink:hover {
color: black;
transition-duration: 0.2s;
}

Danke für jede Hilfe ;)

Croghs

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von yerooke, 20

http://codepen.io/anon/pen/wMgggZ

Kommentar von Croghs ,

Dankeschön! Darf ich fragen ob du eine Idee hast, wie man dies nun trotzdem nach ganz unten bringt? (also für einen Footer typisch)

Kommentar von perhp ,

Normal ist dieser ja schon ganz unten. Da du auf deiner Seite ja nicht nur den Footer-Bereich hast, sondern auch einen Body-Bereich.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten