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

Question

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/

*

What's wrong with display:table-cell? – user123444555621 Sep 17 '11 at 08:19 — user123444555621, Sep 17 '11 at 08:19

score 43 · Accepted Answer · answered Sep 17 '11 at 10:54

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 Sep 17 '11 at 10:54

kizu

42,604
4
68
95

thanks this is working pretty good but i updated question can you check again :) – Furkan Gözükara Sep 17 '11 at 22:33
1

It's because you use an extra non-`inline-block` element. One of the way to make it work: move link to wrapper: http://jsfiddle.net/kizu/XHK2Z/1/, and another, is to move helper into `a`: http://jsfiddle.net/kizu/XHK2Z/2/. Anyway, it's better not to use `div`s inside `a`, it's ok in HTML5, but you still must be cautious with this and avoid it when possible – kizu Sep 18 '11 at 06:15
Wow that worked. This had been killing me for weeks on a project where I was using CSS to create circles and then fit text in them, where each page had different number of lines for the text, while the circle was constant. – Code Monkey Apr 19 '13 at 01:25
Why is `DivHelper` necessary? I see it doesn't align without it, just not sure what it's doing; nice tip! – raffian Dec 26 '13 at 20:25
I explained this method in another answer: http://stackoverflow.com/a/7310398/885556 – kizu Dec 27 '13 at 13:01

score 11 · Answer 2 · answered Sep 17 '11 at 06:21

11

There is no way to do this with CSS without knowing the height of the child div.

With jQuery, you could do something like this.

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

answered Sep 17 '11 at 06:21

timrwood

10,611
5
35
42

I like your simple approach and wrapped it in a function. https://gist.github.com/dylanvalade/7088132 – Dylan Valade Oct 21 '13 at 18:01

score 3 · Answer 3 · answered Mar 21 '14 at 13:13

This solution works for me fine in modern browsers including IE 10 and above.

<div class="parent">
    <div class="child">Content here</div>
</div>

inlucluding this css

.parent {
  height: 700px;
  display: flex;
  justify-content: center;  
  align-items: center;
}
.child {
  width : 525px;
}

score 3 · Answer 4 · answered Sep 17 '11 at 10:20

3

if the parent don't have any other child. this would be a css only "hack"

DivParent{line-height:100px /*the div actual height*/ }
.DivWhichNeedToBeVerticallyAligned{display:inline-block}

another hack is

DivParent{height:100px; position:relative}
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;}

answered Sep 17 '11 at 10:20

Mohsen

64,437
34
159
186

thanks for answer. both hack failed. second one vertically aligned but since you define height it ruins everything :D – Furkan Gözükara Sep 17 '11 at 22:12
aligning vertically is hacky. You will need JS at the end. Just like Facebook: https://www.facebook.com/notes/facebook-engineering/developing-facebooks-new-photo-viewer/499447633919 – Mohsen Sep 18 '11 at 03:00

score 0 · Answer 5 · answered Jul 27 '14 at 20:09

I have been using the following solution (with no positioning, no table-cell/table-row and no line height) since over a year, it works with IE 7 and 8 as well.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

score 0 · Answer 6 · answered Jul 17 '15 at 21:10

Here is another option for modern browsers:

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%);
}

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

6 Answers6

Linked