我知道这个主题有很多答案,但我的代码仍然无法正常工作。 每次我尝试使用 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;
}
最佳答案
您需要像这样在父元素上设置文本对齐方式:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
关于html - 居中水平导航栏CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25244118/