3

次のように css を使用して可変幅のテーブルを中央に配置します。

#article {width=1000px}
table.center {margin: 0 auto}

<div id="article">
<table class="center">
.....
</table>
</div>

ただし、この場合、このテーブルの中心を少し左にずらします。
このテーブルの幅は可変であることに注意してください。テーブルの中心は、それが入っている div から外れている
必要があります。 テーブルの下に width があるとします 。 通常、センタリング中は左右にスペースがあります。でも今はテーブルの左右に置くの が好きです。40%
200px
400px
300px500px

#article {width=1000px}
table.offcenter20left { ??? }

<div id="article">
<table class="offcenter20left">
....
</table>
</div>

この表を中心から外すには、どの CSS コードが必要ですか?

4

3 に答える 3

1

ラッパーを使用すると、負のマージンを使用できます。これはパーセント値をサポートし、動的にすることができます。

HTML

<div class="article">
  <div class="wrapper">
    <table class="offcenter20left">
      <tr>
        <td>.....</td>
      </tr>
    </table>
  </div>
</div>

CSS

table.offcenter20left {
  margin:0 auto;
}

.wrapper {
  margin-left:-20%; /* adjust as desired */
}

ソース: http://jsfiddle.net/8Gas6/3
デモ: http://jsfiddle.net/8Gas6/3/show

于 2013-01-14T22:05:41.040 に答える
1

tableを aでラップし、div相対位置を使用します。

<div class="center-outer">
  <table class="center-inner">
    <!-- ... -->
  </table>
</div>

付随する CSS:

.center-outer {
  position: relative;
  float: left;
  left: 40%;
}

.center-inner {
  position: relative;
  float: left;
  left: -50%;
}

.center-innertableをその幅だけ左にシフトし、左端50%が通常ある場所に沿って中央に配置します。次に、と の両方をの親の幅だけ右に.center-outer押して、実質的にテーブルを の中央に配置します。divtable40%div40%

table同じ親内に複数のものを配置する場合は、2 つのラッパーを使用する方が簡単です。.center-inner次に、各子にアタッチする必要はありません。

<div class="center-outer">
  <div class="center-inner">
    <table>
      <!-- ... -->
    </table>
    <p>
      <!-- ... -->
    </p>
  </div>
</div>
于 2013-01-14T22:02:22.397 に答える
0

動的に計算をCSS3 Calc実行できます。

margin-left: calc(40% - 50px);

(あなたの例のピクセルの半分を仮定すると、小さい画面でも jsFiddle で動作するようになります: 合計 500 ピクセル、幅 100px のテーブル)

(calc() の 50px は、テーブル サイズの半分です)

http://jsfiddle.net/u4Haa/

于 2013-01-14T22:15:08.400 に答える