固定导航栏

Question

我有一个导航栏，想要保持固定和居中。 我的栏目前处于居中位置，但是当我添加“位置：固定”时，它将导航栏一直移到屏幕的左侧。 我的导航栏当前距离屏幕顶部（居中）大约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/

Answer 1

您的<div>是使用固定定位时，因为，默认偏移其取出的文件流的和变成相对于其最接近的定位的祖先（比静态其他）..你的情况大概那根<html>如果你元件您的导航栏没有其他已定位的祖先。 如果将其移到视口的左上角，则这是有道理的。

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

例：

div.social-wrap{
width: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
padding-top: 25px;
}

固定导航栏

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-04-16 16:05:04

固定导航栏

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-04-16 16:05:04

解决方案1
1 已采纳 2013-04-16 16:05:04