Question

我正在尝试使用图像创建标题，但我需要它保持居中而不管水平滚动。所以几乎让它保持居中并随着滚动移动，所以它总是显示出来。

我试着将它集中在一起，并按照我在SO中找到的几个例子，但它们都没有涵盖我需要的东西。

非常感谢任何帮助

Answer 1

听起来你想要固定位置：

img.centered
{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px; /* Width of image /2 */
  margin-top: -100px; /* Height of image /2 */
}

HTML：

<body>
   <img class="centered" src="..." />
</body>

Answer 2

尝试如下所述的背景修复技术：

更好的例子：

http://davidwalsh.name/css-fixed-position-background-image

body    
{
    background:url(your-image.jpg) top right no-repeat;
    background-position:fixed;
}

这是现场演示：

http://davidwalsh.name/demo/background-repeat.php

http://www.w3schools.com/cssref/pr_background-position.asp

例如：

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

Answer 3

也许不是最好的方式，但它有效：

<div style="position:absolute; top:0px; width:100%; Height:100%; overflow:scroll;  left:0px;">ContenContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentt</div>

<div style="position:absolute; top:50%; left:50%;">Centerd stuff</div>

试一试： http://jsfiddle.net/chZWR/

Answer 4

另一种方法：

<强> Working Example

JS

var center = function () {
    var wh = $(window).height();
    ww = $(window).width();
    ch = $('#center').height();
    cw = $('#center').width();
    t = wh / 2 - ch / 2;
    l = ww / 2 - cw / 2;
    $('#center').offset({
        top: t,
        left: l
    });
};

$(document).ready(center);
$(window).resize(center);

CSS

#center {
    position:fixed;
}

使用此方法有一个小优势，如果您需要更改图像的大小或将图像换成另一个图像，则无需调整定位。所有的计算都是在脚本中完成的。

保持图像始终居中无论水平滚动

4 个答案: