Jak umieścić tabelę na środku strony za pomocą CSS?

81

Używam następującego kodu. Jak umieścić tę tabelę na środku strony za pomocą 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>

— CodeBlue
źródło

1

Duplikat wiele innych pytań np stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper

4

wyśrodkowany w poziomie? wyśrodkowany w pionie? obie?

— Marc B

Zarówno w poziomie, jak i w pionie

— CodeBlue

1

możliwy duplikat elementu div wyrównywania w pionie (bez tabel)

— JonH,

106

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

Przykład JSFiddle

Wyrównywanie elementów blokowych w pionie nie jest rzeczą trywialną. Niektóre metody poniżej.

— Michael Robinson
źródło

Hej, ale to tylko wyśrodkowało go w poziomie, a nie w pionie. Co to jest margin: 0 auto?

— CodeBlue

@CodeBlue - zobacz to: stackoverflow.com/questions/1909753/…

— JonH,

31

Możesz spróbować użyć następującego CSS:

table {
    margin: 0 auto;            
}

— DarkAjax
źródło

9

Część przepustowości można zaoszczędzić, usuwając px.

— Stephan,

11

1) Ustawienie wyrównania poziomego na automatyczne w CSS

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

2) Uzyskaj wyrównanie w pionie do środka strony, dodaj następujące do css

html, body { width: 100%; }

Na przykład :

<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
źródło

Został uwięziony w tej samej sytuacji z powodu konfliktów HTML4 i HTML5 i alignment="centre"był absolutny w 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>

— user2645333
źródło

2

Jeśli pytasz o tabelę do wypełnienia środka, na przykład o coś w całkowitym środku., Możesz zastosować następujący kod.

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

ten kod w css pozwoli ci ustawić tabelę jak pływającą. Powiedz mi, czy to ci pomoże.

— Alok Rajasukumaran
źródło

-1

po prostu umieść go w div, a następnie kontroluj ten div z css:

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

— mohsen solhnia
źródło