Question

我需要将导航链接置于div中心，并将其水平对齐。我尝试过这种方法，但没有用。

使用#centermenu修复了上一个错误，谢谢，但是stil不起作用。

            <nav id="centermenu">
                   <ul>
                         <li><a href="#">Business</a></li>
                         <li><a href="#">Specialities</a></li>
                         <li><a href="#">Contact us</a></li>
                    </ul> 
            </nav>

CSS：

#centermenu {
float: left;
width: 100%;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}

#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
display: block;
text-align: center;
}


 #centermenu ul li {
display: block;
float: left;
list-style: none;
margin: 1em;
padding: 1em;
}

由于

Answer 1

UL部分似乎存在输入错误。

Cetermenu ul

取而代之的

Centermenu ul

编辑：

以下似乎对我有用。也许可以逐个添加其他标签，看看它是否会中断。

#centermenu {
float: left;
width: 100%;
    text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}

#centermenu ul {
margin: 2 auto;
display: block
}


#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}

Answer 2

将你的左边从50％改为25％

http://jsfiddle.net/ZW9Qp/

    #centermenu {
    float: left;
    width: 100%;
    border-bottom: 2px solid #011;
    background: #ffe;
    overflow: hidden;
    position: relative;
    }
    #centermenu ul {
    float: left;
    clear: left;
    position: relative;
    list-style: none;
    left: 25%;
    display: block;
    text-align: center;
    }
     #centermenu ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 1em;
    padding: 1em;

}

如何水平对齐导航和居中？

2 个答案: