Menu
I am using the following code. How to put this table in the center of the page using 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> 
341
To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells.
Set height and width to 100% to make the element fill the available space within its parent element. Use display: table-cell on the child element to make it behave like a <td> elements. Use text-align: center and vertical-align: middle on the child element to center it horizontally and vertically.
html, body { width: 100%; } table { margin: 0 auto; } Example JSFiddle
Vertically aligning block elements is not the most trivial thing to do. Some methods below.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
