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

发布于 2025-01-08 08:41:28 字数 1186 浏览 0 评论 0原文

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

原文

I am using the following code. How to put this table in the center of the page using 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雾里花 2025-01-15 08:41:28

2022 年编辑：Flexbox 请

使用 Flexbox，说明如下：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 400px;
}

.box div {
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div class="box">
  <div></div>
</div>

2021 年答案保留如下。

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

示例 JSFiddle

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

Edit for 2022: Flexbox Please

Use Flexbox, instructions here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 400px;
}

.box div {
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div class="box">
  <div></div>
</div>

2021 answer preserved below.

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

Example JSFiddle

Vertically aligning block elements is not the most trivial thing to do. Some methods below.

回复收藏 0 原文

逆光飞翔i 2025-01-15 08:41:28

您可以尝试使用以下 CSS：

table {
    margin: 0 auto;            
}

You can try using the following CSS:

table {
    margin: 0 auto;            
}

回复收藏 0 原文

裂开嘴轻声笑有多痛 2025-01-15 08:41:28

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

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

2) 垂直对齐到页面中心添加以下内容到 css

html, body { 宽度：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>

1) Setting horizontal alignment to auto in CSS

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

2) Get vertical alignment to centre of the page add following to css

html, body { width: 100%; }

For example :

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

回复收藏 0 原文

蛮可爱 2025-01-15 08:41:28

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

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

回复收藏 0 原文

泪是无色的血 2025-01-15 08:41:28

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

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

css 中的这段代码可以让你把你的表格像浮动一样。
告诉我是否对你有帮助。

If you where asking about the table to complete center, like some thing in total center.,
you can apply the following code.

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

this code in css will let you put your table like floating.
Tell me if it helps you out.

回复收藏 0 原文

不疑不惑不回忆 2025-01-15 08:41:28

您可以使用“显示：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>

You can use "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>

回复收藏 0 原文

何其悲哀 2025-01-15 08:41:28

只需将其放在 div 中，然后通过 css 控制该 div：

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

simply put it in the div then control that div whit css:

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

回复收藏 0 原文

~没有更多了~

关于作者

死开点丶别碍眼

暂无简介

文章

27 人气

关注发私信

紫罗兰の梦幻

文章 0 评论 0

关注

-2134

文章 0 评论 0

关注

liuxuanli

文章 0 评论 0

关注

意中人

文章 0 评论 0

关注

○愚か者の日

文章 0 评论 0

关注

xxhui

文章 0 评论 0

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

2022 年编辑：Flexbox 请

Edit for 2022: Flexbox Please

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

2022 年编辑：Flexbox 请

Edit for 2022: Flexbox Please

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。