Question

我知道这个主题有很多答案，但它仍然无法以我的代码工作。每当我尝试使用文本对齐中心对文本进行居中时，除非我删除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

您需要在父元素上设置text-align，如下所示：

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

.nav li {
  display: inline-block;
}

See Demo

Answer 2

我刚编辑了你的css以实现你的需要

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

.nav li {
    display:inline-block;
    text-align: center;
    padding: 10px;
}

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

DEMO

始终避免使用body text-align尝试使用包装。

Answer 3

确保您在HTML代码的顶部提到了<!DOCTYPE html>。否则你的代码似乎很完美。

居中的水平导航栏css

3 个答案: