如何使用CSS将表放在页面的中心？

Question

如何使用CSS将表放在页面的中心？

我使用以下代码.如何使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*son 91

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

Run Code Online (Sandbox Code Playgroud)

示例JSFiddle

垂直对齐块元素并不是最简单的事情.下面的一些方法.

Answer 2

Dar*_*jax 19

您可以尝试使用以下CSS:

table {
    margin: 0px auto;            
}?

Run Code Online (Sandbox Code Playgroud)

通过删除`px`可以保存一些带宽. (6认同)

Answer 3

Gop*_*005 10

1)在CSS中将水平对齐设置为auto

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>

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，10 月前
查看次数：	167780 次
最近记录：	8 年，4 月前