Wie platziere ich eine Tabelle mit CSS in der Mitte der Seite?

80

Ich verwende den folgenden Code. Wie platziere ich diese Tabelle mit CSS in der Mitte der Seite?

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

— Code blau
quelle

1

Duplikat vieler anderer Fragen, z. B. stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper

4

horizontal zentriert? vertikal zentriert? beide?

— Marc B

Sowohl horizontal als auch vertikal

— CodeBlue

1

mögliches Duplikat von vertikal ausrichten div (keine Tabellen)

— JonH

104

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

Beispiel JSFiddle

Das vertikale Ausrichten von Blockelementen ist nicht die einfachste Aufgabe. Einige Methoden unten.

— Michael Robinson
quelle

Hey, aber das hat es nur horizontal und nicht vertikal zentriert. Was ist Margin: 0 Auto?

— CodeBlue

@ CodeBlue - dann sehen Sie dies: stackoverflow.com/questions/1909753/…

— JonH

29

Sie können versuchen, das folgende CSS zu verwenden:

table {
    margin: 0 auto;            
}

— DarkAjax
quelle

9

Einige Bandbreiten können durch Entfernen gespeichert werden px.

— Stephan

11

1) Einstellen der horizontalen Ausrichtung auf Auto in CSS

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

2) Holen Sie sich die vertikale Ausrichtung zur Mitte der Seite und fügen Sie Folgendes zu CSS hinzu

html, body { width: 100%; }

Zum Beispiel :

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

War aufgrund von HTML4- und HTML5-Konflikten in derselben Situation gefangen und alignment="centre"war in HTML5 absolut.

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

2

Wenn Sie nach der Tabelle fragen, um die Mitte zu vervollständigen, wie etwas in der gesamten Mitte, können Sie den folgenden Code anwenden.

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

Mit diesem Code in CSS können Sie Ihre Tabelle schwebend platzieren. Sag mir, ob es dir hilft.

— Alok Rajasukumaran
quelle

-1

Legen Sie es einfach in das Div und steuern Sie das Div mit CSS:

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

— Mohsen Solhnia
quelle