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>
html
css
html-table
center
CodeBlue
źródło
źródło
Odpowiedzi:
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.
źródło
Możesz spróbować użyć następującego CSS:
table { margin: 0 auto; }
źródło
px
.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>
źródło
alignment="centre"
był absolutny w HTML5.<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ódło
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.
źródło
po prostu umieść go w div, a następnie kontroluj ten div z css:
<div class="your_position"> <table> </table> </div>
źródło