Center div in einer Fußzeile

Question

Ich möchte eine Liste von Links in der Fußzeile meiner Website ausrichten, aber egal was ich versuche, es scheint nicht in der Mitte der Fußzeile auszurichten (Wie in der w3schools Fußzeile für Beispiel).

Ich habe versucht mit display: block, display: inline-block, text-align: center und andere, aber egal was ich tue kann ich nie scheinen, es richtig zu machen.

CSS:

footer ul { 
    list-style: none; 
    text-align: center; 
    } 

footer div { 
    margin: 0 auto; 
    display: inline-block; 
    } 

footer { 
    margin-left: 25%; 
    } 

HTML:

<footer> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">Facebook</a></li> 
     <li><a href="#" target="_blank">Twitter</a></li> 
     <li><a href="#" target="_blank">Instagram</a></li> 
     <li><a href="#" target="_blank">Vine</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">YouTube</a></li> 
     <li><a href="#" target="_blank">Twitch</a></li> 
     <li><a href="#" target="_blank">Mobcrush</a> 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">GitHub</a></li> 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
     <li><a href="#" target="_blank">Pastebin</a></li> 
     <li><a href="#" target="_blank">Curse</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
    </ul> 
    </div> 
</footer> 

Jede Hilfe wäre toll, danke!

Answer 1

Verwenden Sie einfach display:flex; auf der Fußzeile.

footer ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    } 
 

 
footer div { 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    } 
 

 
footer { 
 
    display:flex; 
 
    
 
    }

<footer> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">Facebook</a></li> 
 
     <li><a href="#" target="_blank">Twitter</a></li> 
 
     <li><a href="#" target="_blank">Instagram</a></li> 
 
     <li><a href="#" target="_blank">Vine</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">YouTube</a></li> 
 
     <li><a href="#" target="_blank">Twitch</a></li> 
 
     <li><a href="#" target="_blank">Mobcrush</a> 
 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">GitHub</a></li> 
 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
 
     <li><a href="#" target="_blank">Pastebin</a></li> 
 
     <li><a href="#" target="_blank">Curse</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 2

footer {text-align: center;} 
footer div { display: inline-block; } 

Wollen Sie das erreichen?

Answer 3

Try Anzeige Tabelle

footer ul { 
    list-style: none; 
    text-align: center; 
    } 

footer div { 
    margin: 0 auto; 
    display: table; 
    } 

footer { 
    margin-left: 25%; 
    } 

Answer 4

Wenn Sie die Breite Ihres Footer Elements auf 50% (25% linken Rand + 50% Breite lässt eine effektive 25% richtig eingestellt Rand, also zentriert die Fußzeile selbst) und legen Sie die Textausrichtung des Fußzeilenelements auf die Mitte, es wird die Fußzeilen Divs zentrieren, wie Sie wollen. Beachten Sie jedoch, dass dies auch die Textausrichtung der untergeordneten Elemente auf die Mitte einstellt, aber in diesem Fall scheint das das zu sein, was Sie wollen.

footer { 
    margin-left: 25%; 
    width:50%; 
    text-align: center; 
}