Nested div and text centering?

Question

I've got some html that looks similar to this jsfiddle: http://jsfiddle.net/npbvm/

Using some jquery, the program assigns new heights to each of the divs, so that the outer divs are larger then the inner ones. It also repositions the divs to be vertically centered with in its parent (using top).
The issue is that even though the divs are aligned to vertical center, the text they contain is not.

Is there a way to move all the contained text to its div's vertical center?

Thanks Max

You can achieve vertical centering without jQuery by using CSS. For modern browsers you would use `display: table-cell`, for IE7 you need a fallback though. http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — mrtsherman, Jan 15 '12 at 06:25

score 0 · Answer 1 · answered Jan 15 '12 at 06:30

I did something like this before, try to use positioning javascript functions. Then do these lines. It rearranges text positions.

    $(".yourdivs").each(function(){
        $(this).css('height','');
        $(this).css('display','inline-block');
    });

score 0 · Answer 2 · answered Jan 15 '12 at 06:36

0

There are a lot of ways to acheive this with every alternative having its drawback. I think in your case you may play with line-height to move the text.

answered Jan 15 '12 at 06:36

defau1t

10,593
2
35
47

score 0 · Accepted Answer · answered Jan 15 '12 at 06:55

0

Found out a work around. Instead of doing height and trying to center everything. I instead just used padding. It works a lot better, and is a lot cleaner.

Thanks for the answers though,
Max

answered Jan 15 '12 at 06:55

Jess

8,628
6
49
67

Nested div and text centering?

3 Answers3