在Div中垂直居中表格

我做了一些研究，發現垂直居中div表格（表格不跨越整個高度，高度因變化的內容而異）的唯一方法是使用javascript/jQuery的：在Div中垂直居中表格

<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類和表類？

謝謝你

來源

2012-06-13 DextrousDave

供參考 - 整體在[這個問題]通過CSS（和其他手段）垂直居中一堆評論/想法（http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically -with-css） – BrendanMcK

這個答案是對的問題：

我的問題：如何實現我這種情況的代碼？不知道如何調用相關的div和表的JS函數中的特定div類和表類？

「.DivDiv」和「.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>

更新：新增失蹤報價和請求的代碼

這樣，您將使用$（ '＃rightDiv'）和$（'＃rightDivTable '）在jQuery中爲你的元素。

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

來源

2012-06-13 20:52:23

這與回答問題有什麼關係嗎？ – BrendanMcK

爲什麼這麼多人很難理解這個問題？垂直居中，不水平居中。 – j08691

當然，問題是如何使用jQuery來引用腳本中的元素。 – 2012-06-13 20:59:23

這樣你可以在一個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-13 20:38:23 libjup

問題是關於將一個表*垂直居中* ... – BrendanMcK

您是否已嘗試將margin-top和margin-bottom設置爲auto？ – libjup

謝謝，但正如BrendanMcK所說，我需要一個非固定高度表的垂直居中。 – DextrousDave

希望我能正確理解你的問題 - 這個例子怎麼樣？ 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-13 20:44:57 GBR84

首先，問題與您的答案無關！並順便顯示：表格單元格不跨瀏覽器。 – 2012-06-13 20:55:36

@drdigit - 加文的回答比你的準確得多。 – j08691

再次閱讀這個問題。 DextrousDave通過使用他的腳本，想要知道如何引用div和table，從而獲得了方法。另一種可能是我完全醉了。 – 2012-06-13 21:05:10

怎麼樣這個 -

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

center不推薦使用，但什麼是使用它的問題。

更新 -

我不能沒有尺寸爲它分配中心。

來源

2012-06-13 20:46:43 Ash

。它希望它的中心標籤回來。哦，OP想要垂直居中，而不是水平居中。 – j08691

也是中心只用於水平居中...... – libjup

「不建議使用中心，但使用它的問題是什麼。」很差的邏輯。 – kevin628

有可能是垂直居中的其他方式，但如果你想堅持的腳本，這裏是這樣做的一種方式 - 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-13 21:29:48 BrendanMcK

在Div中垂直居中表格

回答

相關問題