wottynot Posted May 4, 2015 Share Posted May 4, 2015 I have been trying to construct a football league table in time for the new 2015-16 season. I started well, i think lol. But i can't for the life of me remember how to center the web page onto the center of the screen. Hope someone will take pity on this old codger and help him out. You can see the web page here http://www.freewebs.com/diarco/champtable.html <!doctype html><html lang="en"><head> <title>Championship League Table</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="footie-styles.css"></head><body><div id="div"><table class="list"><caption class="captn"><h1 align="center">Championship League Table 2015-16</h1></caption></table><table class="list2" cellspacing="0"><thead><tr><th class="Pos">Pos</th><th class="blank"> </th><th class="Teams">Teams</th><th class="blank"> </th><th class="Pld">Pld</th><th class="blank"> </th><th>W</th><th>D</th><th>L</th><th>F</th><th>A</th><th class="blank"> </th><th>W</th><th>D</th><th>L</th><th>F</th><th>A</th><th class="blank"> </th><th class="GD">GD</th><th class="blank"> </th><th class="Pts">Pts</th></tr></thead><tbody><tr><td colspan="20" height="5"></td></tr><tr class="box"><td>1</td><td class="blank"><td>Bournemouth</td><td class="blank"><td>46</td><td class="blank"><td>13</td><td>7</td><td>3</td><td>48</td><td>25</td><td class="blank"></td><td>13</td><td>5</td><td>5</td><td>50</td><td>20</td><td class="blank"><td class="GD">53</td><td class="blank"> </td><td class="Pts">90<td></tr></tbody></table></div></body></html> And the CSS body { margin: 0 auto; padding: 0;}#div { width: 817px; margin-right:auto; margin-left:auto; margin: 50px 0 50px 0; border: 1px solid red;}.list { width: 797px; margin-right:auto; margin-left:auto; border: 0; padding: 0 10px 0 10px; }th { width: 30px; margin-right: 3px; border-bottom-style: solid;}td { width: 30px; text-align:center;}.captn { font-size: 16px; text-decoration: underline;} .blank { width: 30px; border: 0;}.Pos { width: 35px;}.Pld { width: 35px;}.GD { width: 35px; margin-right: 3px;}.Pts { width: 35px; margin-right: 3px;}.Teams { width: 150px;}tr.box:hover { background-color: #F0F0F0;} Link to comment Share on other sites More sharing options...
Ingolme Posted May 4, 2015 Share Posted May 4, 2015 Setting left and right margins to "auto" is the way to do it. Your problem is that you're overriding it: margin-right:auto;margin-left:auto;margin: 50px 0 50px 0; This line overrides the previous two To solve it, put the auto declarations with the other one: margin: 50px auto; The first one indicates vertical margins, the second value indicates horizontal margins. Link to comment Share on other sites More sharing options...
wottynot Posted May 4, 2015 Author Share Posted May 4, 2015 Big thanks for the help Ingolme. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now