Comment placer un tableau au centre de la page à l'aide de CSS ?

Question

Comment placer un tableau au centre de la page à l'aide de CSS ?

Demandé el 22 de Février, 2012: Quand la question a-t-elle été
200433 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'utilise le code suivant. Comment placer ce tableau au centre de la page à l'aide de 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>

Demandé el 22 de Février, 2012 par CodeBlue

2 votes

Duplication de nombreuses autres questions, par ex. stackoverflow.com/questions/2281087/center-a-div-in-css

Commenté el 22 de Février, 2012 par jacktheripper

4 votes

Centré horizontalement ? centré verticalement ? les deux ?

Commenté el 22 de Février, 2012 par Marc B

0 votes

À la fois horizontalement et verticalement

Commenté el 22 de Février, 2012 par CodeBlue

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

108voto

Michael Robinson Points 14791

Edit for 2022 : Flexbox Please

Utilisez Flexbox, instructions ici : 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 réponse conservée ci-dessous.

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

Exemple JSFiddle

Aligner verticalement des éléments de bloc n'est pas la chose la plus triviale à faire. Quelques méthodes ci-dessous.

Répondu el 22 de Février, 2012 par Michael Robinson (14791 Points )

0 votes

Hé, mais cela ne le centrait qu'horizontalement et non verticalement. Par ailleurs, qu'est-ce que margin : 0 auto ?

Commenté el 22 de Février, 2012 par CodeBlue

0 votes

@CodeBlue - alors voyez ceci : stackoverflow.com/questions/1909753/

Commenté el 22 de Février, 2012 par JonH

Answer 3

31voto

DarkAjax Points 8324

Vous pouvez essayer d'utiliser le CSS suivant :

table {
    margin: 0 auto;            
}

Répondu el 22 de Février, 2012 par DarkAjax (8324 Points )

9 votes

On peut économiser de la bande passante en supprimant px .

Commenté el 20 de Juillet, 2014 par Stephan

Answer 4

12voto

Gops Points 166

1) Définir l'alignement horizontal sur auto en CSS

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

2) Pour obtenir un alignement vertical au centre de la page, ajoutez ce qui suit à la css

html, body { width: 100%; }

Par exemple :

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

Répondu el 15 de Avril, 2015 par Gops (166 Points )

0 votes

J'étais piégé dans la même situation à cause des conflits entre HTML4 et HTML5 et alignment="centre" était absolu en HTML5.

Commenté el 15 de Avril, 2015 par Gops

Answer 5

8voto

user2645333 Points 19

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

Répondu el 21 de Janvier, 2014 par user2645333 (19 Points )

Answer 6

2voto

Alok Rajasukumaran Points 249

Si vous demandez la table au centre complet, comme quelque chose au centre total.., vous pouvez appliquer le code suivant.

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

ce code en css vous permettra de mettre votre table comme flottante. Dites-moi si cela vous aide.

Répondu el 16 de Mars, 2015 par Alok Rajasukumaran (249 Points )

Comment placer un tableau au centre de la page à l'aide de CSS ?

Réponses

Edit for 2022 : Flexbox Please

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment placer un tableau au centre de la page à l'aide de CSS ?

Réponses

Edit for 2022 : Flexbox Please

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: