Question

我做了一些研究，发现在div中垂直居中一个桌子的唯一方法（桌子没有跨越整个高度，高度因内容的不同而变化）是javascript / jquery：

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

现在我的代码如下所示： 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>

我的问题：如何针对这种情况实现该代码？不知道如何在相关的div和表的JS函数中调用特定的div类和表类？

谢谢

Answer 1

希望我能正确理解你的问题 - 这个例子怎么样？ 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

这个答案是针对这个问题的：

我的问题：如何针对这种情况实现该代码？不知道如何在相关的div和表的JS函数中调用特定的div类和表类？

“。rightDiv”和“.rightDiv table”在你的样品中什么都没提供！使它更简单。

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>

更新：添加了缺失的引号和请求的代码

这样你就可以在jquery中为你的元素使用$（'＃rightDiv'）和$（'＃rightDivTable'）。

JS

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

Answer 3

通过这种方式，您可以将表格置于div中。通过将margin-left和margin-right设置为auto，您可以将每个对象居中。

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

Answer 4

这个怎么样 -

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

建议不要使用

center，但使用它会有什么问题。

<强>更新 -

我无法在没有尺寸的情况下指定它。

Answer 5

可能有其他垂直居中的方式，但如果你想坚持使用脚本，这是一种方法 - jsfiddle here：

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

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

JQuery允许您使用CSS样式选择器来引用元素，因此您可以使用现有类并以与CSS相同的方式引用它们。或者您可以分配ID并使用$（'＃idgoeshere'） - 也许更新CSS也可以使用基于id的选择器。

使用ID可以更快，因为JQuery可以在内部优化选择器查询以使用document.getElementById。（使用基于类的选择器的一个共同好处是，您可以一次性操作一组匹配元素 - 尽管如果表具有不同的高度，这在您的特定情况下不起作用。）

在Div中垂直居中

5 个答案: