0

我有一个脚本，它在 div 中加载运行 jQuery Cycle Lite 插件的图像。

我得到提示，我可以使用该插件中的“之后”功能来在每次刷新图像时更改图片。所以我写了这个：

$("#display div").css({  
  margin: "0 auto",  
  "text-align": "center",  
});

像这样构建的html：

<div id="display">
  <div id="slideshow1">
     <img ... />  
  </div> 
</div>

这不起作用，怎么了？
（这应该使其水平居中，我需要将其垂直居中）..

编辑：
我有点让它工作了，但它仍然需要帮助，任何人都知道它为什么表现得很奇怪？ http://hem.bredband.net/noor/bildspelet.html

感谢@pekka 的链接

4

2 回答 2

1

首先，JavaScript 对象中的尾随逗号是不好的东西，删除最后一个逗号。

其次，您可能可以这样计算：

var $div = $('#display');
$div.css('position', 'relative');

var $kids = $div.children(); 
// I'm assuming you want to center all the slideshows?
$kids.each(function() {
  var $this = $(this);
  $this.css({
    left: ($div.innerWidth(true) - $this.width()) / 2,
    top: ($div.innerHeight(true) - $this.height()) / 2,
    position: 'absolute'
  });
});

通过查看您的示例：您<div id="display">需要在 css 中设置一个高度（甚至 100%），否则它将始终缩小以包含（当所有子项都设为绝对定位时，高度将折叠为零）。请看一下jsbin 示例

于 2010-04-22T16:20:52.557 回答
0

对于这样的东西，CSS 解决方案总是比 JS 解决方案更可取，因为 a) 它可以在关闭 JavaScript 的情况下工作，b) 它可以立即工作，没有延迟，也没有与确保布局流入其最终布局相关的时间问题休息的地方。但是在这种情况下有 CSS 解决方案吗？

CSS

使用您提供的标记，仅使用 CSS 就无法以跨浏览器的方式（包括 IE 6-8）垂直居中图像。但是，对您的标记稍作更改以包含一个包装单单元表格，然后您可以使用vertical-align:middle. 您的标记将如下所示：

<div id="display">
  <div id="slideshow1">
     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">
       <img ... />
     </td></tr></table>  
  </div> 
</div>

额外的 HTML 杂乱无章，但它保持居中，即使图像尺寸发生变化，也不会运行任何脚本。

JS

如果您想改用 JavaScript，看起来 gnarf 的想法是正确的（除了他为什么将所有变量都以美元符号开头命名？）我会接受它并将主体移动到一个命名函数中，这样您就可以随时调用它你想要（说recenter）。对于初始渲染，您希望它尽快发生，所以我会recenter()在标记中的幻灯片 DIV 之后立即内联调用。

于 2010-04-22T16:40:01.553 回答