如何垂直对齐div在另一个div，无显示：table-cell [英] How to vertically align div inside another div without display:table-cell

问题描述

确定这是div结构。

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

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

  </a>    
  </div>

DivParent具有固定的宽度和高度值，但DivWhichNeedToBeVerticallyAligned没有固定的高度值。

DivParent has fixed width and height values but DivWhichNeedToBeVerticallyAligned does not have fixed height values.

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

If you make DivParent display:table-cell; you can vertically align DivWhichNeedToBeVerticallyAligned but i don't want to use that feature since it causes some mess.

href标记链接应该与divParent i的大小相同divparent必须可点击。像显示：块。

A href tag link should be same size with the divParent i mean whole divparent has to be clickable. like display:block.

所以有任何CSS方式的垂直对齐或轻量的jquery解决方案也将有所帮助。

So are there any CSS way of vertically aligning or lightweight jquery solution would also help.

谢谢。

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

*

推荐答案

您可以使用额外的助手在固定高度的块中实现垂直对齐。

You can use an extra helper to achieve vertical alignment in a block with fixed height.

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

您必须有一个助手您要对齐的块：

There you must have a helper near a block you want to align with:

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

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

这篇关于如何垂直对齐div在另一个div，无显示：table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！