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

===============>>#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;
}

  ask by Seth Urquhart translate from so

未解决问题?本站智能推荐:

2回复

居中导航栏我已经尝试了一切

好的,所以我正在为客户网站的导航栏尝试一种与众不同的技术,而对于为什么它无法居中,我完全感到困惑。 我也希望它随着页面的大小缩小。 我通常使ul width = 100%,但是当我在这里这样做时,它将使我的链接转到下一行而其后没有图像。 我的想法是修复此问题,以便在人们滚动浏览页面时始终存
1回复

CSS-如何相对于居中的内容div定位固定的侧边栏div

基本上,我有一个固定的侧边栏(具有固定的宽度)和一个内容div(具有最大宽度)。 我希望内容div居中,并且边栏位于此内容div的左侧。 问题是,在小屏幕上或在缩小窗口大小时,内容div必须缩小并且不能推动侧栏。 我尝试了很多解决方案(带有假边距块的浮动块,display:in
3回复

以固定div为中心,div大小与图片相同

所以我想在屏幕中央放置一个固定的div。 这个div也应该是子div的容器。 我也希望它显示图像(作为背景)。 这是图像的代码: 我想保持这种方式,以便浏览器始终显示完整图像。 目前,我正在尝试使用此html代码: 我确实尝试过使用CSS(在CSS代码中添加图片)来做到这
2回复

如何以特定的宽度和固定的位置将div居中?

我正在编码,并试图将div在页面中间水平居中。 它只是一个普通的div,现在里面没有任何内容。 我的代码是这样的: 基本上,我只希望宽度为500px的白色矩形在页面中居中放置,该矩形占据页面高度的100%。 谢谢。
3回复

居中位置:固定div当视口达到指定宽度时

我希望为我的网站创建一个布局,其中侧边栏固定在视口的右侧,宽度为30%(内容位于其左侧),直到浏览器窗口达到一定宽度,此时我想要内容和侧边栏要居中,不再随浏览器窗口一起增长(因为在极大的宽度下难以阅读)。 以下是使用html的想法: 以下是一些用于格式化的基本HTML: #sideb
2回复

DIV位置:固定; 水平居中

我试图将包含固定位置SVG文件的DIV水平居中,它们都具有“ LEFT”和“ TOP”标签的值,以便按顺序放置它们。 现在,如何使用FIXED定位标签获取包含SVG文件(具有TOP和LEFT标签的自定义值)在浏览器中水平居中的DIV,从而不会影响容器的宽度? 所有CSS代码都在下面。
14回复

中心对齐固定位置div

我正在尝试在页面上对齐具有position:fixed中心的div。 我始终能够使用此“ hack”与绝对定位的div做到这一点 ...其中margin-left的值是div宽度的一半。 这似乎不适用于固定位置的div,而只是将其最左角放置在50%处,而忽略margin-left声明。
1回复

导航弹出窗口div将不会在IE中显示

我的css驱动的导航栏在Firefox中可以正常工作,但在IE中却不能。 我认为这与飞出的Flash电影有关。 我的页面在这里 。 第一个菜单项是“客户服务”,并且应该有一个弹出菜单项“索赔表格”。 我尝试在Flash中使用wmode = transparent并在导航栏元素中弄乱了z-
1回复

固定标题下方的固定导航栏

所以我有一个html页面和一个固定的图像作为标题,但我想在其下方也有一个固定的导航栏,在这里可以有链接到服务器上另一页面的按钮 这是我的代码
3回复

将内容置于固定导航栏下

我试图使网站的内容显示在导航栏下,该导航栏的位置已固定。 我将尺寸设置为百分比,因此填充(即使是百分比)在不同的宽高比上也不起作用(该网站在移动设备上的工作方式也应类似)。 * { padding: 0; margin: 0; user-select: none; -ms-us