Question

<head>
<title>WCK&TMB</title>
<style>

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

html, body {
    width: 100%;
    background-color: #FFC18F;
}

div#container {
    width: 100%;
    min-width: 1024px;
}

header {
    height: 100px;
    width: 100%;
    background-color: #ff8400;

    text-align: center;
}

header img {
    clear: left;
    float: left;
    margin: 10px;
}

header a#purchase {
    background: url("http://i.imgur.com/RJe8a1D.png") repeat-x;

    width: 500px;
    height: 25px;
    margin: 30px;
    padding: 5px;

    border: 3px double #ccc;
    text-align: center;

    float: right;

    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff;
}

section#main {
    padding: 0px 0px 10px 0px;
    text-align: center;
}

section#main div#head_announcements {
    padding-top: 10px;

    color: #000;
    font-family: "Arial";
}

section#main div#head_announcements h2 {
    font-size: 24px;
    font-weight: lighter;
    line-height: 26px;
}

section#main h2 a {
    color: #FFFFFF;
    text-decoration: none;
}

section#main h2 a:hover {
    color: #000000;
}

section#main nav {
    background: url("./images/navBG.png") repeat-x;
    width: 100%;
    height: 35px;
    text-align: center;
}

section#main nav a.link {
    font-family: "Century Gothic";
    text-decoration: none;
    color: white;
    font-size: 25px;
    vertical-align: top;
    float:center;
}

section#main nav a.link:nth-of-type(1) {
    float:center;
}

section#main nav a.link:hover {
    color: #39F;
}

section#main nav a.link.active {
    color: #39F;
}


section#main section#frames {
    margin-top: 10px;
    width: 100%;
}

section#main section#frames iframe {
    border: 0px;
    outline: 0px;
    overflow: hidden;

    margin: 0px;
    padding: 0px;
}

section#main section#frames iframe#frame1 {
    width: 650px;
    height: 450px;
    background-color: black;
}

section#main section#frames iframe#frame2 {
    width: 350px;
    height: 450px;
}

footer {
    padding: 10px 0px 10px 0px;
    width: 100%;
    text-align: center;
    height: 110px;
}
</style>
</head>

网址：http://skyaccess.se/forum/misc.php?page=hdppvs

我似乎无法将导航栏文本居中。有人可以纠正这个吗？

另外，我正在尝试学习CSS，所以如果有人能给我看一个很棒的网站，我会非常感激。考虑支付29美元/月是一些带点数的互动网站。

Answer 1

在你的css中添加float：left：

section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
float: left;

Answer 2

还添加此css以在导航之间创建间隙：“padding-right：40px;”。

section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float: center;
padding-right: 40px;

CSS导航栏中心

2 个答案: