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

80

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

— 蓝代码
source

1

与许多其他问题重复，例如stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper 2012年

4

水平居中？垂直居中？都？

— Marc B

水平和垂直方向

— CodeBlue 2012年

1

垂直对齐div的

— JonH 2012年

104

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

示例JSFiddle

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

— 迈克尔·罗宾逊
source

嘿，但这只是水平居中，而不是垂直居中。另外，保证金是什么：0自动？

— CodeBlue 2012年

@CodeBlue -再看到这一点：stackoverflow.com/questions/1909753/...

— JonH

29

您可以尝试使用以下CSS：

table {
    margin: 0 auto;            
}

— 黑暗阿贾克斯
source

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
source

由于HTML4和HTML5冲突而陷入同一情况，并且alignment="centre"在HTML5中是绝对的。

— Gopal00005

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>

— 用户名
source

2

如果您要在哪里查询表格以完成中心，例如总中心中的某些内容，则可以应用以下代码。

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

CSS中的这段代码可让您像浮动一样放置表格。告诉我是否有帮助。

— 阿洛·拉贾苏库玛兰（Alok Rajasukumaran）
source

-1

只需将其放在div中，然后控制该div的css即可：

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

— Mohsen Solhnia
source