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 回答