是否可以将图像在 div 内的两个轴上居中？

Question

我有一个脚本，它在 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 提供链接

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

使用您提供的标记，仅使用 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）。对于初始渲染，您希望它尽快发生，所以我会在标记中的幻灯片 DIV 之后立即内联对 recenter() 的调用。