如何將 ul CSS 居中

Question

我有一個用於我的頁面導航的 ul，我想將它居中，但我不知道如何去做。 這是我的代碼：

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">What Are Drones</a></li>
<li><a href="#">How Do Drones Work</a></li>
<li><a href="#">Buying a Drone</a></li>
 <li><a href="#">About Us</a></li>
</ul>


#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav li { display:inline-block; position: relative; padding: 0; line-height:    100px; background: #666 url(nav-bg.png) repeat-x 0 0; }
#nav li:hover { background-position: 0 -40px; }
#nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; font-size: 50px; font-family: 'Cuprum', sans-serif; }
#nav li a:hover { color:#0F0 }
#nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#nav li:hover ul { opacity: 1; }
#nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#nav li:hover ul li { height: 30px; line-height: 30px; }
#nav li ul li a { background:#666 }
#nav li ul li a:hover { background:#666 }
#nav { background-color:#666; }

Answer 1

這是將列表居中的最簡單解決方案：

 #nav { display: table; margin: auto; } #nav > li { display: block; }

 <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">What Are Drones</a></li> <li><a href="#">How Do Drones Work</a></li> <li><a href="#">Buying a Drone</a></li> <li><a href="#">About Us</a></li> </ul>

我使用display: table因為：

1. 它適合它的內容，比如display: inline-block
2. 它允許我在不使用額外元素的情況下將其居中。

Answer 2

這真的取決於你想要做什么，你的限制以及你如何嘗試構建你的網站，但對我來說設置text-align:center; 在 #nav 元素上，所有單獨的菜單元素都相對於它們出現的行居中。

如果您需要深入了解它的藝術，可以在此處閱讀更多內容： https : //css-tricks.com/centering-list-items-horizo​​ntally-slightly-trickier-than-you-might-think/

但正如他們所說，這在現代 HTML 中非常簡單。 只有當您出於某種原因或其他一些古怪的設置需要支持舊瀏覽器時，它才會變得更加復雜。