Как разместить таблицу в центре страницы с помощью 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>
html css html-table center CodeBlue
источник
1
Дубликат многих других вопросов, например stackoverflow.com/questions/2281087/center-a-div-in-css
jacktheripper
4
горизонтально по центру? вертикально по центру? и то и другое?
Marc B
Как по горизонтали, так и по вертикали
CodeBlue
1
возможный дубликат div с вертикальным выравниванием (без таблиц)
JonH

Ответы:

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

Пример JSFiddle

Выравнивание элементов блока по вертикали - не самое тривиальное занятие. Некоторые методы ниже.

Майкл Робинсон
источник
Эй, но это только центрировало его по горизонтали, а не по вертикали. Кроме того, что такое маржа: 0 авто?
CodeBlue
@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 и 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>
пользователь2645333
источник
2

Если вы спрашиваете о таблице для полного центра, например, о какой-то вещи в полном центре, вы можете применить следующий код.

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

этот код в css позволит вам разместить вашу таблицу как плавающую. Скажите, поможет ли это?

Алок Раджасукумаран
источник
-1

просто поместите его в div, затем контролируйте этот div с css:

<div class="your_position">
  <table>
  </table>
</div>
Mohsen Solhnia
источник