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

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