Centering a table vertically in a Div

Question

I did some research and found that the only way to vertically center a table inside a div(where the table does not span the full height, the height varies with varying content) is with javascript/jquery:

<script>
   var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
   $('table').css('margin-top', tableMarginTop)
</script>

Now my code looks like this: CSS:

.rightDiv{
    width: 300px
    height: 380px;
    background: url(http://myimage.com) no-repeat;
}

.rightDiv table{
    margin: auto; /*For centering horizontally*/
}

HTML:

<div class="rightDiv">
  <table width="80%">
    <tr><td></td></tr>
  </table>
</div>

My question: How to I implement that code for this situation? Not sure how to call the specific div class and table class in the JS function for the relevant div and table?

Thank You

FYI - whole bunch of comments/ideas on vertical centering via CSS (and other means) at [this question](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — BrendanMcK, Jun 13 '12 at 21:00

GBR84 · Answer 1 · 2012-06-13T20:52:29.427

2

Hoping I have understood your question correctly - how about this example? http://jsfiddle.net/9Zg8a/1/

<div style="height:200px; vertical-align:middle; display:table-cell; border:green 1px solid">
  <table style="border:red 1px solid">
    <tr>
      <td>test text
      </td>
    </tr>
  </table>
</div>

edited Jun 13 '12 at 20:52

answered Jun 13 '12 at 20:44

GBR84

31
5

First of all the question is not related to your answer! And by the way display:table-cell is not cross browser. – Jun 13 '12 at 20:55
1

@drdigit - Gavin's answer is far more accurate than yours. – j08691 Jun 13 '12 at 20:59
Read once again the question. DextrousDave has the way by using his script by he wants to know how to refer to div and table. Another possibility is that I'm completely drunk. – Jun 13 '12 at 21:05
1

Just to clarify on the point made by @drdigit, from what i have seen <= IE7 will not support this. Also, posted this method as DextrousDave is under the impression JS was the only way this can be achieved. – GBR84 Jun 13 '12 at 21:12
yes, this works. Why didn't I think of this... I had to however nest the display:table cell div inside the .rightDiv... Since the .rightDiv already has a must-have display of inline-block... – DextrousDave Jun 13 '12 at 21:22
1

Gavin, the only cross browser (and platform) way, avoiding nested divs and quirks, is JS. I'm sure in the future things will be different, but nowadays that's the way it is. – Jun 13 '12 at 21:25

score 1 · Accepted Answer · 2012-06-13T21:39:34.190

1

This answer is for the question:

My question: How to I implement that code for this situation? Not sure how to call the specific div class and table class in the JS function for the relevant div and table?

".rightDiv" and ".rightDiv table" at your sample offers nothing! Make it simpler.

CSS

#rightDiv{
    width: 300px
    height: 380px;
    background: url(http://myimage.com) no-repeat;
}

#rightDivTable{
    margin: auto; /*For centering horizontally*/
}

HTML

<div id="rightDiv">
  <table id="rightDivTable" width="80%">
    <tr><td></td></tr>
  </table>
</div>

UPDATE: added missing quotes and requested code

This way you will use $('#rightDiv') and $('#rightDivTable') in jquery for your elements.

JS

var 
    testHeight = $('#rightDiv').innerHeight(),
    tableHeight = $('#rightDivTable').outerHeight(),    
    tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
    $('#rightDivTable').css('margin-top', tableMarginTop);

edited Jun 13 '12 at 21:39

answered Jun 13 '12 at 20:52

1

Does this have anything at all to do with answering the question? – BrendanMcK Jun 13 '12 at 20:56
Why are so many people having a hard time understanding this question? Center vertically, not horizontally. – j08691 Jun 13 '12 at 20:59
Of course, The question is how to refer to the elements in the script using jquery. – Jun 13 '12 at 20:59
Thanks, but I actually specifically want to know how to customize this part of the js: Math.round( (testHeight - tableHeight) / 2 ) with regard to ID's? BTW, your answer is the closest to actually answering my question. So if you can help me get this js part to work, you get the points! – DextrousDave Jun 13 '12 at 21:24
JQuery lets you use CSS-style selectors, which can use IDs *or* classes; so $('.rightDiv table') will select the table, and $('.rightdiv') will select the div. Using IDs can be more efficient, though, since internally JQuery can optimize that to using document.getElementById(). (Just don't forget the quotes! - $('#rightDiv') ) Here's an example jsfiddle that uses script to do the centering: http://jsfiddle.net/Rkm6c/ – BrendanMcK Jun 13 '12 at 21:27
@BrendanMcK - Thanks, this looks more like it. However, having issues working your button, does not react, maybe need an onclick function? Also tried using it in my code but not working. but I'm tired now will try again tomorrow... – DextrousDave Jun 13 '12 at 21:38
Sorry, I added the old jsfiddle before I clicked the update - updated one here and also in my reply below: http://jsfiddle.net/Rkm6c/5/ – BrendanMcK Jun 13 '12 at 21:40
cool. thank you. for some reason it does not update my margin-top on the table. Should I maybe specify #rightDivTable{ margin-top: var(tableMarginTop) } or is the js suppose to do that automatically? – DextrousDave Jun 14 '12 at 09:34
what is missing the "px" definition -> $('#rightDivTable').css('margin-top', tableMarginTop + 'px') – Jun 14 '12 at 10:48

score 0 · Answer 3 · answered Jun 13 '12 at 20:38

0

This way you can center a table in a div. By setting margin-left and margin-right to auto you can center pretty much every object.

<div style="300px; height: 380px">
  <table style="margin-left:auto; margin-right:auto">
    <tr>
      <td>
        ...
      </td>
    </tr>
  </table>
</div>

answered Jun 13 '12 at 20:38

libjup

4,019
2
18
23

thanks, but as BrendanMcK says, I need vertical centering for a non-fixed height table. – DextrousDave Jun 13 '12 at 21:13

Ash · Answer 4 · 2012-06-13T20:52:28.927

0

how about this-

<div class="rightDiv">
  <center><table width="80%">
    <tr><td></td></tr>
  </table></center>
</div>

center is not recommended for use but what is the problem in using it.

Update-

i can't assign it center without dimensions.

edited Jun 13 '12 at 20:52

answered Jun 13 '12 at 20:46

Ash

3,431
2
15
15

1

1998 called. It wants its center tag back. Oh and the OP wants to center vertically, not horizontally. – j08691 Jun 13 '12 at 20:48
"center is not recommended for use but what is the problem in using it." Very poor logic. – kevin628 Jun 13 '12 at 20:54
thanks for your answer, but nope, centers it horizontally only. perfect fix for that is margin: auto – DextrousDave Jun 13 '12 at 21:11

score 0 · Answer 5 · answered Jun 13 '12 at 21:29

There may be other ways of centering vertically, but if you want to stick with script, here's one way of doing it - jsfiddle here:

var testHeight = $('.rightDiv').innerHeight();
var tableHeight = $('.rightDiv table').outerHeight();

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop)

JQuery lets you use CSS-style selectors for referencing elements, so you can use your existing classes and refer to them in the same way that the CSS does. Or you can assign IDs and use $('#idgoeshere') instead - and perhaps update the CSS also to use id-based selectors.

Using IDs can be faster, since JQuery can internally optimize the selector query to use document.getElementById. (One common benefit to using class-based selectors is that you can operate on a set of matching elements all in one go - though this doesn't work in your specific case if the tables have differing heights.)

Centering a table vertically in a Div

5 Answers5