0

我有一个导航栏,我想保持固定和居中。我的栏目前居中,但是当我添加“位置:固定”时,它将我的导航栏一直移动到屏幕的左侧。我的导航栏目前距离屏幕顶部大约 20%(居中)。

CSS:

div.social-wrap{
width: 500px;
margin: 0 auto 0 auto;
padding-top: 25px;
}

HTML:

<div class="social-wrap">
        <ul>
            <li><a href="index.html" class="link_home shadow extend">Home</a>
            </li>
            <li><a href="about.html" class="link_identity shadow extend">Identity</a>
            </li>
            <li><a href="books.html" class="link_books shadow extend">Books</a>
            </li>
            <li><a href="contact.html" class="link_contact shadow extend">Contact</a>
            </li>
            <li><a href="https://twitter.com/Christdentity" class="link_twitter shadow extend" target="_blank">Twitter</a>
            </li>
        </ul>
</div>

这是jsfiddle:

http://jsfiddle.net/Sederu/uPZuu/

4

1 回答 1

1

<div>在使用固定定位时正在移动,因为默认情况下它从文档流中取出并相对于其最近的定位祖先(静态除外)..在您的情况下,<html>如果您没有任何其他元素,那可能是根元素为您的导航栏定位祖先。如果它移动到视口的左上角,这是有道理的。

您基本上需要将 left 属性设置为 50% 以居中,还需要将 margin-left 设置为 div 宽度的负一半以将中心移向 div 的中间。

例子:

div.social-wrap{
width: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
padding-top: 25px;
}
于 2013-04-16T16:05:04.030 回答