CSS 导航栏中心

标签 css navigation centering

<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/mo 是一些带积分的互动网站。

最佳答案

在你的 CSS 中添加 float:left:

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

关于CSS 导航栏中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21058753/

相关文章:

css - 在透明 header 上使用 (-webkit-)backdrop-filter

javascript - 将图像轮播指示器添加到 jQuery 图像幻灯片而不需要 Bootstrap ?

javascript - 使用 jquery if 语句检测选择值

html - 如何将 "nested div"结构居中?

java - 如何在单击按钮时将图像发送到下一个屏幕

html - 带有 block 的响应式导航菜单

html - 客户端看到不同版本的页面。居中问题

silverlight - 在 Silverlight/WinRT 中仅使用 XAML 将元素定位在 Canvas 内的中心(而不是左上角)

ionic-framework - 如何在 Ionic 3 中的页面弹出时执行回调?

java - 在 Vaadin Flow 的布局中居中小部件