Як розмістити таблицю в центрі сторінки за допомогою 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>

1
Дублікат багато інших питань , наприклад , stackoverflow.com/questions/2281087/center-a-div-in-css
jacktheripper

4
горизонтально відцентрований? вертикально центрирован? обидва?
Marc B

Як по горизонталі, так і по вертикалі
CodeBlue

Відповіді:


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

Приклад JSFiddle

Вертикальне вирівнювання блокових елементів - не найтривіальніша справа. Деякі методи нижче.


Гей, але це відцентрувало його лише по горизонталі, а не вертикально. Крім того, що таке маржа: 0 авто?
CodeBlue

@CodeBlue - то подивитися: stackoverflow.com/questions/1909753 / ...
JONH

31

Ви можете спробувати використовувати наступний CSS:

table {
    margin: 0 auto;            
}​

9
Деяку смугу пропускання можна зберегти, видаливши px.
Stephan

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>

Він потрапив у ту саму ситуацію через конфлікти 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>

2

Якщо ви запитуєте про таблицю, щоб заповнити центр, як щось у загальному центрі., Ви можете застосувати наступний код.

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

цей код у css дозволить вам поставити таблицю як плаваючу. Скажіть, чи це вам допомагає.


-1

просто помістіть його в div, а потім керуйте цим div з css:

<div class="your_position">
  <table>
  </table>
</div>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.