Question

我在调整网页上的文字位置时遇到了困难。页面上的项目似乎浮动而不是锁定。我需要它们相对于背景图像保持静止。

例如，我有一个名为“leftMenu”的div项目我希望左侧菜单保留在背景图像左侧大约20个像素。在我必须将背景图像居中之前，事情似乎有效。现在背景图像居中，我似乎已经失去了相对于背景锁定div位置的能力。

当屏幕尺寸很大时，东西看起来很好，但是当页面尺寸改变时，leftMenu会遍布整个地方。我目前正在使用绝对和相对定位进行大量的试验和错误，但我似乎无法获得正确的设置组合，无论页面大小如何都能使项目保持不变。

页面：http://107.22.173.10/ user：test2 传球：abc111

非常感谢任何建议。

Answer 1

为什么不使用一个大背景来获取文本并将其绝对定位到中心，为什么不使用与背景图像大小完全相同的div并使用它来居中：

CSS：

html, body{
    height:100%;
    position:relative;
}


div.siteWrapper{
    background: !VALUE;/* your background*/
    padding: 0 0 0 0;  /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
    width: !VALUE;     /* width of your background - (left + right padding)*/
    margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}

HTML：

<body>
    <div class="siteWrapper">
        //everything in here
    </div>
</body>

Answer 2

根据你的要求，你需要创建一个包装器div，你的整个东西应该存在，你需要使用jquery / javascript来计算包装器顶部，右侧，左侧，底部的位置它在屏幕的中心。例如jquery的灯箱。因为当显示器尺寸变化时，分辨率会发生变化，背景图像的位置会根据情况发生变化，但内容是根据元素上id / class设置的css设置的。

难以调整网页上的文字位置

2 个答案: