2

HTMLページの幅が（でmax-width）制限されているシナリオがあります。これにより、ページ上のテキストが広くなりすぎないようになります（そして読みにくくなります）。

また、いくつかのデータがテーブル（中央に配置されている）に表示されています。これは、テーブルが親コンテナー内に収まる限り、正常に機能します。ただし、テーブルが親要素よりも幅が広くなる場合があります。その時点で、テーブルは中央に配置されなくなり、代わりに左に揃えられます。

親がオーバーフローしてもテーブルが中央に留まるようにテーブルを中央に配置する方法はありますか？

私のHTMLがこのように見えるとすると、これを実現するにはどのCSSが必要でしょうか？

<div class=content>
  <p>Lorem ipsum...</p>
  <table>
      ...
  </table>
  <p>Lorem ipsum...</p>
</div>

ところで。当たり前のことかもしれませんが、ここでは水平方向のセンタリングについてのみ説明しています。

これが私のシナリオのフィドルです：http：//jsfiddle.net/zrajm/tnAS3/

4

4 に答える 4

3

CSSmargin: 0 auto;は、テーブルがその親要素内に収まる限り機能します。テーブルがそれより大きくなると、左揃えになります。

親よりも幅の広いテーブルを中央に配置するには、負の左マージンを設定する必要があります。テーブルの正確な寸法がわかっている場合は、CSSで直接実行できます（のようなものを使用margin-left: -130px）。ただし、テーブルの幅が変わる可能性がある場合、これを実現する唯一の方法は、Javascriptを使用して左マージンを調整することです。

（以下のコードは、jQuery、および質問で説明されているHTML構造を想定しています。）

var contentWidth = $('.content').width();
$('table').each(function (i, table) {
    var tableWidth, margin;
    table = $(table);
    tableWidth = table.width();
    if (tableWidth > contentWidth) {
        margin = (tableWidth - contentWidth) / 2;
        table.css('margin-left', '-' + margin + 'px');
    }
});

上記のスクリプトは、より広いテーブルを検索し.content、それらの左マージンのみを変更します。

（フィドルもあります：http：//jsfiddle.net/zrajm/tnAS3/2/）

于 2012-08-30T13:05:03.180 に答える
1

margin: 0 auto;特にテーブルを囲むdivのスタイルに追加してみます。これにより、親が何であれ、その中心に配置されます。

<div class=content>
  <p>Lorem ipsum...</p>
  <div style="margin: 0 auto;">
    <table>
      ...
    </table>
  </div>
  <p>Lorem ipsum...</p>
</div>
于 2012-08-30T11:06:55.633 に答える
1

あなたはこれを行うことができます： 

.calss  
{    
    margin:auto;    
    width:??px ;        
    height:??px ;/*(or auto)*/        
}

このコードを使用すると、あなたの中にあるものはすべて中央マージンになります。
また、テーブルの固定幅を宣言する場合、テーブルの幅をそれより広くすることはできません。
また、テーブルの幅と高さを指定することもできます。

于 2012-08-30T11:41:47.563 に答える
0

このHTMLだけの場合、HTML部分を変更する必要はありません。

<div class=content>
  <p>Lorem ipsum...</p>
  <table>
      ...
  </table>
  <p>Lorem ipsum...</p>
</div>

CSSは次のようになります。

table {margin: 0 auto;} /* You can set your width */

フィドル： http： //jsfiddle.net/svHvR/1/

于 2012-08-30T11:08:49.033 に答える