中心导航栏内容/链接答案

【问题标题】：Center NavBar content/links中心导航栏内容/链接
【发布时间】：2016-05-15 09:57:29
【问题描述】：

我需要在导航栏中将内容链接居中。这个：

我希望主页、关于和联系人位于导航栏的中心。

【问题讨论】：

你需要发布你到目前为止的代码
你能分享一些代码吗？文本对齐：居中；在正确的地方可以工作....
HTML: <body> <h1><a class="headerhome" href="index.html">gavinw.ml</a></h1> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div class="hero"> <h2>Gavin - Toasst</h2> <a href="http://twitter.com/gavinw_">@gavinw_</a> </div> <p id="footer">&copy; Gavin W 2016.</p> </body> </html>
CSS: CSS: ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } a:hover:not(.active) { background-color: #111; } .active { background-color:#4CAF50;

【解决方案1】：

您可以将li 元素设置为display: inline-block 并在ul 元素上添加text-align: center，而不是使用float。

ul {
    text-align: center;
}
li {
    display: inline-block
}

【讨论】：