Question

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

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

$("#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的链接

Answer 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 example

Answer 2

对于这样的东西，CSS解决方案总是比JS更好，因为a）它可以在关闭JavaScript的情况下工作，b）它可以立即工作，没有延迟，也没有与确保布局流动相关的时序问题进入最后的安息之地。但在这种情况下是否有CSS解决方案？

<强> CSS

使用您提供的标记，没有办法以交叉浏览器的方式（包括IE 6-8）垂直居中，只需要CSS。但是，对标记进行少量更改以包含单个包裹的表格，然后您可以使用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 cruft但它保持居中，即使图像尺寸发生变化，也不会运行脚本。

<强> JS

如果你想使用JavaScript，看起来像gnarf有正确的想法（除了为什么他用美元符号命名所有变量？）我会把它拿到并将身体移动到一个命名函数中，这样你就可以了随时打电话（说recenter）。对于初始渲染，您希望它尽快发生，因此我会在标记中幻灯片显示DIV后立即调用recenter()。

是否可以将图像置于div内的两个轴上？

2 个答案: