J'utilise le code suivant. Comment mettre ce tableau au centre de la page en utilisant 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, body {
width: 100%;
}
table {
margin: 0 auto;
}
Exemple JSFiddle
L'alignement vertical des éléments de bloc n'est pas la chose la plus triviale à faire. Quelques méthodes ci-dessous.
Vous pouvez essayer d'utiliser les CSS suivants:
table {
margin: 0px auto;
}
1) Définition de l'alignement horizontal sur auto en CSS
margin-left: auto; margin-right: auto;
2) Obtenir l'alignement vertical au centre de la page, ajouter ce qui suit au format 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>
<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>
Si vous vous interrogiez sur la table pour compléter le centre, comme quelque chose au centre, vous pouvez appliquer le code suivant.
margin: 0px auto;
margin-top: 13%;
ce code en css vous permettra de mettre votre table comme flottante. Dis-moi si ça t'aide.
tout simplement le mettre dans la div puis contrôler cette div avec css:
<div class="your_position">
<table>
</table>
</div>