CSSを使用してページの中央にテーブルを配置するにはどうすればよいですか？

81

私は次のコードを使用しています。CSSを使用してこのテーブルをページの中央に配置するにはどうすればよいですか？

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Main Page</title>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
            </tr>
        </table>
    </body>
</html>

— CodeBlue
ソース

1

他の多くの質問の複製（例：stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper 2012

4

水平方向に中央に配置されますか？垂直方向の中央？どちらも？

— マークB

水平方向と垂直方向の両方

— CodeBlue 2012

1

垂直方向に整列するdivの

— JonH 2012

106

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

JSFiddleの例

ブロック要素を垂直方向に整列させることは、最も簡単なことではありません。以下のいくつかの方法。

— マイケルロビンソン
ソース

ねえ、しかしこれはそれを水平方向にのみ中央に配置し、垂直方向には中央揃えにしませんでした。また、マージンとは何ですか：0自動？

— codeBlue 2012

@CodeBlue -この参照してください。stackoverflow.com/questions/1909753/...

— JonH

31

次のCSSを使用してみることができます。

table {
    margin: 0 auto;            
}

— DarkAjax
ソース

9

一部の帯域幅は、を削除することで保存できますpx。

— ステファン

11

1）CSSで水平方向の配置を自動に設定する

margin-left: auto; margin-right: auto;

2）ページの中央に垂直方向の配置を取得しますcssに以下を追加します

html, body { width: 100%; }

例えば：

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>

— Gopal00005
ソース

HTML4とHTML5の競合が原因で同じ状況に陥り、HTML5ではalignment="centre"絶対的でした。

— gopal00005 2015

8

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>

— user2645333
ソース

2

トータルセンターのように、テーブルを完成させるためにテーブルについて尋ねる場合は、次のコードを適用できます。

margin: 0px auto;
margin-top: 13%;

cssのこのコードを使用すると、テーブルをフローティングのように配置できます。それがあなたを助けるかどうか教えてください。

— Alok Rajasukumaran
ソース

-1

単にそれをdivに入れて、そのdivを制御します。css：

<div class="your_position">
  <table>
  </table>
</div>

— モーセンソルニア
ソース