Alex Rivera | Logout

How to vertically align div inside another div without display:table-cell

Asked 2011-09-16T14:18:13.223
12

Ok this is the div structure.

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

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

  </a>    
  </div>

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

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.

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

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

Thank you.

Here jsfiddle : http://jsfiddle.net/XHK2Z/

*

jquery html css vertical-alignment
Edit
Report

1 Answer

43

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

Look at this: 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%;
}

And add display: inline-block; vertical-align: middle; to .DivWhichNeedToBeVerticallyAligned

answered 2011-09-17T10:54:55.320

Your Answer