1

我做了一些研究，发现在 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>

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

谢谢你

4

5 回答 5

2

希望我正确理解了你的问题——这个例子怎么样？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>​
于 2012-06-13T20:44:57.840 回答
1

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

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

您的示例中的“.rightDiv”和“.rightDiv 表”一无所获！让它更简单。

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);
于 2012-06-13T20:52:23.560 回答
0

这个怎么样-

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

center不建议使用，但使用它有什么问题。

更新-

我不能在没有尺寸的情况下为其分配中心。

于 2012-06-13T20:46:43.160 回答
0

可能还有其他垂直居中的方法，但如果你想坚持使用脚本，这里有一种方法 - 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。（使用基于类的选择器的一个共同好处是，您可以一次性对一组匹配的元素进行操作 - 尽管如果表格具有不同的高度，这在您的特定情况下不起作用。）

于 2012-06-13T21:29:48.690 回答
0

这样您就可以在 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>
于 2012-06-13T20:38:23.983 回答