Question

我正在寻找一种方法，在正确的中心使用#logo元素，使用非相对值，这意味着如果我缩小它不会向左缩小但向中心缩放。我需要保持固定cos的位置我需要它以#main div滚动。

#main {
        margin:0 auto;
        height:1200px;
        width:1200px;
        background-image:url(Background.png);
        background-repeat:no-repeat;
    }

    #logo {
        top:20px;
        left:700px;
        margin-left:-177.6px;
        width:355.2px;
        height:148.8px;
        position:fixed;
}

Answer 1

不确定你的意思，但如果你使用左：75％而不是左：700px;如果我理解正确的话，可以用百分比代替像素来解决它

Answer 2

你的意思是正确的中心。

徽标左侧位于页面中央
徽标位于页面中央

Fiddle for 1 (left side logo centered)
将#logo更改为

#logo {
    width:355.2px;
    height:148.8px;

    top:20px;
    left:50%;
    position:fixed;
}

Fiddle for 2 (logo centered on page)
将你的#css和html改为：
HTML

<div id="logo-holder">
    <div id="logo"></div>
</div>

和css

#logo-holder{
    position:fixed;    
    left: 50%;
    top: 20px;
}

#logo {
    position: absolute;
    width:355.2px;
    height:148.8px;
    left: -177.6px;
}

<强>更新
滚动页面中有标志的新小提琴
http://jsfiddle.net/k64g4g4r/2/

Answer 3

我自己只使用CSS解决了这个问题。我做的是将徽标放在另一个div中，我称之为徽标容器，我给出了非相对宽度，这意味着像素，而不是百分比。我把徽标放在里面所以它看起来也是固定的，并且在容器div（这是标题）中居中，边距为0 auto。如果容器div是我给出的像素数量，它将不会被任何屏幕调整大小改变，这意味着即使该网站在移动设备中打开它仍然是PC大小，因此你必须向左滚动以查看徽标，但同时如果我向上和向下滚动，徽标将始终存在。总而言之，我所取得的成就是：一个上下滚动的徽标，因为我居中的div有一个固定的位置，当窗口调整大小时不会“逐渐浮动”，就像通常会发生的那样固定位置元素，因为我把它放入的div有一个像素宽度，这意味着无论你调整多少，它总是那些像素。如果我使用百分比，就像我之前做的那样，宽度将取决于窗口的大小，因此它会导致它在调整大小时“逐渐浮动”，我不想这样，我解释。为了确保所有内容都作为标题居中，我使用了magin 0 auto。无论如何，谢谢你的努力。这是我编写的代码，如果您只想查看它。

<div id="logocontainer">
<div id="logo">
<a href="MyIndex.html"><img src="Logo.png" width="355.2px" height="148.8px" onMouseOver="this.src='Logo2.png'" onMouseOut="this.src='Logo.png'" /></a>
 </div><!--ends logo-->
 </div><!--ends logo container-->

#logocontainer {
        margin:0 auto;
        position:fixed;
        width:1200px;
        height:148.8px;
    }

    #logo {
        margin:0 auto;
        width:355.2px;
        height:148.8px;
    }

使用非相对值使具有固定位置的元素居中

3 个答案: