Question

我有一个导航栏，我想保持固定和居中。我的栏目前居中，但当我添加'position：fixed'时它将我的导航栏一直移动到屏幕左侧。我的导航栏目前距屏幕顶部约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>正在转移，因为默认情况下its taken out of the document flow并且相对于其最近的定位祖先（静态除外）...在您的情况下可能是根{{1}如果您的导航栏没有任何其他定位的祖先，则元素。如果它移动到视口的左上角，这是有意义的。

你基本上需要将left属性设置为50％到中心，并且还需要将margin-left设置为div宽度的负半部分，以将中心移向div的中间。

示例：

<html>

固定导航栏

1 个答案: