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

Answer 1

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>​

Answer 2

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);

Answer 3

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> 

Answer 4

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.

Answer 5

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.)