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>

私の質問：この状況でそのコードを実装するにはどうすればよいですか？関連するdivとテーブルのJS関数で特定のdivクラスとテーブルクラスを呼び出す方法がわかりませんか？

ありがとうございました

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

この答えは質問に対するものです：

私の質問：この状況でそのコードを実装するにはどうすればよいですか？関連するdivとテーブルのJS関数で特定のdivクラスとテーブルクラスを呼び出す方法がわかりませんか？

サンプルの「.rightDiv」と「.rightDivtable」は何も提供しません。シンプルにします。

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

垂直方向に中央揃えする方法は他にもあるかもしれませんが、スクリプトを使い続けたい場合は、これを行う1つの方法があります-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'）を使用することもできます。また、IDベースのセレクターを使用するようにCSSを更新することもできます。

JQueryはdocument.getElementByIdを使用するようにセレクタークエリを内部的に最適化できるため、IDの使用はより高速になります。（クラスベースのセレクターを使用することの一般的な利点の1つは、一致する要素のセットを一度に操作できることです。ただし、テーブルの高さが異なる場合、これは特定のケースでは機能しません。）

于 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 に答える
0

これはどう-

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

center使用はお勧めしませんが、使用上の問題は何ですか。

アップデート-

寸法なしで中央に割り当てることはできません。

于 2012-06-13T20:46:43.160 に答える