positioning table in middle of page using css

Started by Walalayo, 09-20-2011, 03:35:58

Previous topic - Next topic

WalalayoTopic starter

hi am trying to position a table in a middle of a page , so it stays in middle of page when users adjust thier screen sizes using css, and am stuck
any 1 know of any tutorials on the web where i can look

cheers for any info


saravanan28

#1
To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following. Changing the style attribute in the <table> tag, as shown above, results in the table being centered on the web page, as shown below.


To position a table in the middle of a page and have it stay centered when users adjust their screen sizes, you can use CSS. Here's an example of how you can achieve this:

HTML:
```
<div class="container">
  <table>
    <!-- Your table content goes here -->
  </table>
</div>
```

CSS:
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

table {
  /* Add your table styles here */
}
```

In this example, the `container` div is set to take up the full height of the viewport (`100vh`) and uses flexbox properties to center its contents both horizontally (`justify-content: center`) and vertically (`align-items: center`). The table inside the container will then be centered on the page.

You can adjust the styles as needed to fit your specific requirements. Additionally, here are some tutorials you can check out for further information:

- CSS Tricks: Centering in CSS - https://css-tricks.com/centering-css-complete-guide/
- MDN Web Docs: Centering in CSS - https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

I hope this helps!
  •