Question

我正在使用jQuery ScrollTo插件将页面滚动到同一页面上的特定<div>或ID。

我目前以#p1为主要内容，#p2位于屏幕右侧。

当我点击#p2的链接时，我的页面向左滚动就好了; 但我的#p2内容位于右侧屏幕的边缘。

我想知道如何将mye #p2内容置于中心位置，无论屏幕分辨率和距离#p1

的距离如何

HTML

<div class="container">
    <div class="col col-25">
        <a href="#p2">Typefaces</a>
    </div>

    <div class="offscreen">
        <div class="etc">
            <p id="p2">Some paragraph text</p>
        </div>
    </div>
</div>

CSS

.container {
    max-width: 1600px;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto
}

.offscreen {
    position: absolute;
    right: -1200px;
}

.etc {
    width: 1250px;
    margin: 0 auto;
    padding: 0 5%;
    padding-top: 100px;
    overflow: hidden;
}

.etc p {
    max-width: 450px;
}

任何帮助将不胜感激。谢谢！

Answer 1

试试这个：http://jsfiddle.net/s3R6U/1/

使＃p1和＃p2均为50％宽度，向左浮动。而你的容器div宽度为200％。

<强> HTML

<div id="container">
    <div id="p1"><a href="#p2">Typefaces</a></div>
    <div id="p2">This is a test</div>
</div>

<强> CSS

#container {
    width: 200%;
}

#p1, #p2 {
    width: 50%;
    float: left;
}

#p1 {
    text-align: left;
}

#p2 {
    text-align: center;
}

Answer 2

我做了一些改变，请检查它们是否正确

HTML 的

<div class="container" style="border:1px solid black">
<a href="#p2">Typefaces</a>
<div class="offscreen" style="border:1px solid black">
<div class="etc" style="border:1px solid black">
<p id="p2">Some paragraph text</p>
</div>
</div>
</div>

CSS

.container {

    max-width: 2600px;
    padding-left: 1em;
    padding-right: 0em;
    margin-left: auto;
    margin-right: auto
}

.offscreen {
    position: absolute;
    right: -750px;
    left: 100px
}

.etc {
    width: 100px;
    margin: 0 auto;
    padding: 0 5%;
    padding-top: 100px;
    overflow: hidden;
}

.etc p {
    max-width: 100px;
}

在这里，我添加了带边框的html，这将帮助您更多地了解文本的位置。完成后，请从<div>中删除这些样式属性。 In.offscreen如果您要定位到中心位置，那么文本将会出现在中心位置，或者在屏幕右侧和左侧更改位置可以为您提供更好的输出。

我已使用 jsfiddle 在Google Chrome中验证。请核实并告诉我......

ScrollTo内容未居中

2 个答案: