web-dev-qa-db-ja.com

HTMLテーブルを中央揃えにする

現在作業中のページでは、最初の行に画像があり、その下に2列のテキストがあるテーブルを中央に配置することはできません（2列は画像の長さを超えてはいけません） width）ここにページがあります： http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html これを解決するために多くの時間を費やしました。ラッシュする必要があるため、また、各画像に異なる幅/ +レイアウトのソートの20ページを作成する必要があるため、HTMLで保持したいと思います。

htmlhtml-tablealignment
48
FabricePMW

デザインでは、テーブルではなくdivを使用するのが一般的です。これにより、適切なスタイリングにより、レイアウトのメンテナンス性と変更性が向上します。慣れるまでには多少時間がかかりますが、長期的には非常に役立ち、スタイリングの仕組みについて多くを学ぶことができます。ただし、当面の問題の解決策を提供します。

スタイルシートでは、マージンとパディングが0ピクセルに設定されています。これは、align="center"属性をオーバーライドします。通常、すべての要素がこの方法で影響を受けることは望ましくないため、CSSからこれらの設定を削除することをお勧めします。 CSSで何が起こっているかを既に知っていて、そのように保ちたい場合は、スタイルをテーブルに適用して以前のセットをオーバーライドする必要があります。テーブルにclassを指定するか、スタイルをHTMLとインラインに配置できます。次の2つのオプションがあります。

  1. クラスで：

    <table class="centerTable"></table>

Style.cssファイルには、次のようなものがあります。

.centerTable { margin: 0px auto; }

  1. HTMLとインライン：

    <table style="margin: 0px auto;"></table>

0pxに設定されている余白とパディングを消去することにした場合は、整列する列のalign="center"タグに<td>を保持できます。

98
Wesley Porter
table
{ 
margin-left: auto;
margin-right: auto;
}

これは間違いなく機能します。乾杯

35
Talha Daniyal

これを試して -

<table align="center" style="margin: 0px auto;"></table>
13
Avinash T.