html - 居中水平导航栏CSS

Question

我知道这个主题有很多答案，但我的代码仍然无法正常工作。每次我尝试使用 text-align center 将文本居中时，它都不起作用，除非我删除 float: left、display: inline 或 display: inline-block。但是我有一个垂直居中的导航栏......

谁能帮我解决这个问题？

这是我的 HTML 代码:

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="workshop.html">Moviekids festivals</a></li>
    </ul>
</div>

这是CSS代码:

*{
margin: 0px;
padding: 0px;
}

body {
text-align: center;
font-family: arial;
background-color: white;
}

#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}

.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}

.nav ul {
list-style-type: none;
}

.nav li {
display: inline;
text-align: center;
}

.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}

Answer 1

您需要像这样在父元素上设置文本对齐方式:

.nav ul {
  list-style-type: none;
  text-align: center;
}

.nav li {
  display: inline-block;
}

See Demo