Jquery 在各种div的中间垂直对齐文本

您好，我有一些文本在一个不同大小的div中的图像下面，文本已经水平居中，但我想使用jquery垂直居中和水平居中

我该怎么做

下面是示例页面

谢谢

---

SatCSS解决方案：

JQuery解决方案：

a。将所有框的HTML结构更改为：

<div class="wp-caption alignnone">
  <div class="imageContainer">
    <img class="new geometric ikat" title="Rug-3" src="http://satbulsara.com/luke-irwin/wp-content/uploads/2011/05/Rug-31.jpg" alt="" width="308" height="409" />
  </div>
  <p class="wp-caption-text">Testing 4</p>
</div>

---

下面是一个示例和一把小提琴如何垂直居中：

正文
$（函数（）{
$（'.textToAlign'）。每个（函数（索引，项）{
var parent=$（item.parent（）；
变量$this=$（项目）；
css（'position'，'relative'）；
$this.css（'position'，'absolute'）.css（'top'，Math.round（（parent.height（）-$this.outerHeight（））/2）+'px'）；
});
});

宽度和高度不总是固定的您是否尝试过在div上显示：表格单元格#4关于这一点：

var maxHt = 0;
var $containers = $('div.imageContainer');
$containers.each(function(){
  var ht = $(this).height();
  if (ht > maxHt) {
    maxHt = ht;
  }
});
$containers.height(maxHt);

<div style="height:120px; width:120px; border: 1px solid black">
    <div class="textToAlign" style="text-align:center; width:100%">Text</div>
<div>

$(function() {
    $('.textToAlign').each( function( index, item) {
         var parent = $(item).parent();
         var $this = $(item);
         parent.css('position', 'relative');
         $this.css('position', 'absolute').css('top', Math.round((parent.height() - $this.outerHeight()) / 2) + 'px');
    });
});