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

时间:2012-02-22 20:57:25

标签: html css html-table center

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

7 个答案:

答案 0 :(得分:82)

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

示例JSFiddle

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

答案 1 :(得分:18)

您可以尝试使用以下CSS:

table {
    margin: 0px auto;            
}​

答案 2 :(得分: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>

答案 3 :(得分:8)

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>

答案 4 :(得分:2)

如果你在那里询问桌子是否完成了中心,就像整个中心的某些东西一样。 您可以应用以下代码。

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

这个css中的代码会让你把你的表放得像浮动一样。 告诉我它是否会帮助你。

答案 5 :(得分:1)

您可以使用“display: flex;”。

body{
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex; /* WIDTH and HEIGHT are required*/
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <table border>
        <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>

答案 6 :(得分:0)

只需将其放入div然后用css控制该div:

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