在頁腳的中心div

我想在我的網站的頁腳中對齊鏈接列表，但無論我嘗試什麼，它似乎都不會在頁腳中心對齊（如在w3schools頁腳中例）。在頁腳的中心div

我已經嘗試過使用display: block,display: inline-block,和其他人，但不管我做什麼，我似乎永遠也看不到它是正確的。

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>

任何幫助將是巨大的，謝謝！

來源

2016-04-14 ItzJavaCraft

你能爲我們提供jsfiddle.net嗎？ –

如果你想要像w3schools一樣的東西，你將不得不使用一個像CSSss的CSS網格 –

'footer {text-align：center; }' –

只需在頁腳上使用display:flex;即可。

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>

來源

2016-04-14 17:05:18 Wowsk

**謝謝！：d ** – ItzJavaCraft

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

是你想完成的嗎？

來源

2016-04-14 17:04:56

嘗試顯示錶

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

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

footer { 
    margin-left: 25%; 
    }

來源

2016-04-14 17:07:20

如果您的頁腳元素的寬度設置爲50％（25％的左邊距+ 50％的寬度留下一個有效的25％權因此首先將頁腳居中），並將頁腳元素的文本對齊設置爲居中，它將使頁腳居中對齊。但是請注意，這將子元素的文本對齊設置爲居中，但在這種情況下，這似乎是您想要的。

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

來源

2016-04-14 18:58:58

在頁腳的中心div

回答

相關問題