【问题标题】:Turn.js can't seem to center flipbook in browser windowTurn.js 似乎无法在浏览器窗口中居中翻书
【发布时间】:2012-07-27 14:30:02
【问题描述】:

Turn.js 的 autoCenter 属性更改了 #flipbook 的左边距,以使翻书内的 图像 保持虚拟居中。但是,我希望翻书在我的 浏览器 中居中,但 autoCenter 会影响放置边距:0 auto;在#flipbook 上。

有什么办法可以让翻书在浏览器窗口居中,都打开了 autoCenter 属性,这样我就不必编写双页视图 autoCenter'ing JavaScript 自己的功能?

【问题讨论】:

    标签: javascript turnjs


    【解决方案1】:

    翻书正在处理#flipbook 元素,我想它是一个“div”元素,对吧?

    所以脚本应该只将 div 内的对象居中... 现在,尝试将这个 'div' 输入另一个,例如:

    //HTML..
    <div id="container" style="position:absolute;width: 50%;
        margin: 0px auto;">
    
           <div id="flipbook" style="position:relative">
           //Script works here
           </div>
    </div>
    //HTML..
    

    抱歉,如果这对您没有帮助..

    尝试提供一些代码来帮助我解决您的问题..

    【讨论】:

    • 正确,但问题是,如果您使用 turn.js 的 autoCenter 属性,它会将翻页书的左边距更改为 -200px,并使整个翻页书偏离中心,相对于#container div .当我不使用 autoCenter 属性时,我可以让它在容器中很好地居中翻书,但是我没有得到 autoCenter 给你的自动书内居中:它应该使封面居中 a书,然后当您将页面翻到 2 页跨页时,它会调整左侧边距以并排显示 2 张图像,但仍然居中。这可能是 Turn.js 的一个错误。
    • 好吧,这只是一个 css 问题,脚本工作正常。你能给我一些代码吗?我只需要里面有翻书 div 的容器和设置边距的脚本部分。我将在接下来的几个小时内对其进行分析,现在我得走了。。
    • 是的,诀窍是放置一个特殊的翻书父容器并使其居中。我有一个不同的父容器,专门用于调整浏览器大小 - 所以诀窍是同时拥有两个外部容器:一个用于调整浏览器大小,一个用于居中。谢谢。
    猜你喜欢
    • 1970-01-01
    • 2012-05-08
    • 2017-04-01
    • 2010-11-02
    • 1970-01-01
    • 2016-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多