Question

我使用以下代码创建一个布局，问题是，导航菜单不会居中，文本中心，但导航栏的其余部分没有。

这是我的HTML：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="container">
    <h1>Test</h1>


    <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


    <div id="content">
    </div>

    <div id="footer">
        <p>Test</p>
    </div>

    </div>
</body>

</html>

这是我的CSS：

/***** Body *****/
body {
    font-family: arial, helvetica;
    text-align:center;
}

div#container {
}

/***** Navigation Menu *****/

ul#navigation {
    margin: 20px;
    padding: 0;
    list-style: none;
    width: 525px;
}

ul#navigation li {
    display: inline;
}

ul#navigation a {
    text-decoration:none;
    padding: 5px 0;
    width: 100px;
    background: #485e49;
    color: #eee;
    float: left;
    text-align:center;
}

ul#navigation a:hover {
    background: #FF00FF;
    text-align:left;
}

ul#navigation a:active {
    text-align:right;
}

Answer 1

您可以将其添加到ul#navigation css以使其居中：

margin:0 auto 0 auto;

可替换地：

margin-left:auto;
margin-right:auto;

Answer 2

将ul#navigation更改为

ul#navigation {
    padding: 0;
    list-style: none;
    width:400px;
    margin:0 auto;    
}

示例：http://jsfiddle.net/jasongennaro/3WS7B/

你的width发生了什么事。将其修复为400px后，应用margin:0 auto即可。

如何使导航菜单居中？

2 个答案: