如何在没有显示的情况下在另一个div内垂直对齐div:table-cell

Question

好的,这是div结构.

  <div class="DivParent"> 
  <a href="#">

  <div class="DivWhichNeedToBeVerticallyAligned"></div>

  </a>    
  </div>

DivParent具有固定的宽度和高度值,但DivWhichNeedToBeVerticallyAligned没有固定的高度值.

如果你做DivParent显示:table-cell; 你可以垂直对齐DivWhichNeedToBeVerticallyAligned,但我不想使用该功能,因为它会导致一些混乱.

一个href标签链接应该与divParent的大小相同我的意思是整个divparent必须是可点击的.喜欢显示:块.

那么有任何CSS方式的垂直对齐或轻量级jquery解决方案也会有所帮助.

谢谢.

在这里jsfiddle:http://jsfiddle.net/XHK2Z/

*

Answer 1

您可以使用额外的帮助程序在具有固定高度的块中实现垂直对齐.

看看这个:http://jsfiddle.net/kizu/7Fewx/

在那里,您必须在要对齐的块附近有一个帮助器:

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

并添加display: inline-block; vertical-align: middle;到.DivWhichNeedToBeVerticallyAligned

Answer 2

如果不知道子div的高度,就无法用CSS做到这一点.

使用jQuery,你可以做这样的事情.

var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);