html - 如何对齐我的导航栏，使其永久位于我的白框中间(没有填充等)？

Question

这是我的网站。导航栏给我带来了可怕的问题。昨晚我的 friend 告诉我它掉下来了，我只是不知道如何修复它:

http://i60.tinypic.com/23iigpi.png

所以我删除了宽度并减少了一些让我感到沮丧的按钮上的文本。

无论如何，现在我希望我的小导航栏在我的白色 block 的中间居中。有谁知道最好的方法吗？

http://www.simplypsychics.com/null/index-test.html

我试过:

并修改了 CSS 中的各种定位，但似乎没有任何效果。

这是我的导航 CSS:

#nav {
position: absolute;
top: 98px;
left:15px;
float: left;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 13px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}

这是我的 HTML:

<div id="nav" style="margin:0 auto !important;">
<li class="home-icon1" onclick="window.location.href='http://www.simplypsychics.com/'"></li>
<li class="home-icon2"><a href="http://www.simplypsychics.com/readers/" target="_parent">FIND A PSYCHIC READER</a></li>
<li class="home-icon3"><a href="http://www.simplypsychics.com/readings/" target="_parent">PSYCHIC READINGS</a></li>
<li class="home-icon4"><a href="http://www.simplypsychics.com/book/" target="_parent">BOOK A READING</a></li>
<li class="home-icon5"><a href="http://www.simplypsychics.com/psychicreadings/" target="_parent">FIND OUT MORE</a></li>
<li class="home-icon6"><a href="http://www.simplypsychics.com/help/" target="_parent">HELP/FAQ</a></li>
</div>

此外，如果导航栏看起来很糟糕，就像我的 friend 那样，请告诉我! :(

Answer 1

在父级(#headerwhiteback)上设置: 文本对齐:居中；

然后在#nav 上，删除: position:absolute； float :左；

并添加这个 CSS:

#nav {
    display: inline-block;

}
#nav::before {
    content: "";
    clear: both;
}

此外，根据您的喜好:在#nav 上添加 margin-top:(25px 似乎没问题)，并在下一个元素 #headertextbottom 上添加 padding-top: 小得多(20px 似乎没问题)。

这只是对标题的快速修复。请记住:CSS 在这里看起来很可怕，看起来要从头开始重写，否则只会给你带来越来越多的麻烦。祝你好运!