All geek questions in one place

HTML - vertical table alignment

Possible duplicate:
How to vertically align a table in CSS

I would like to place the smack dab table in the center of the page. IT is easy to horizontally align it using

<table align="center"></table>

But this will not allow:

 <table align="center" valign="center">

I also cannot put valign in a div because it is not a valid attribute.

I have an idea to make the cell occupied the whole page using:

 <Table align="center" width="100%"> <tr><td valign="middle" height="100%"></td></tr> </table>

But this also does not work, because my <td> does not occupy the entire page. When I set its height to 100%, it only takes up the necessary space.

Any ideas? CSS will also be helpful.

+4
source share
2 answers

http://www.pmob.co.uk/pob/vertical-center1.htm

After you follow this link, right-click the open page and view the source code.

You will notice that IE is more complicated because they use conditional comment (if you are not used to it, it is difficult). What they do is take the window height on line 48 of the code and put the field at 50% of the current window height, so it even works when resizing.

For other browsers, it should be pretty clear how they do it ... using a combination of position, valign and text alignment to achieve the desired effect.

Hope this helps!

+3
source

It works if you set the absolute positioning of the object.

Here is an example (I just tried it on Safari):

 <html> <head> <title>Dead Center</title> <style type="text/css"> .dead_center { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 30%; height: 30%; margin: auto; background-color: green; } </style> </head> <body> <table class="dead_center"> <tr> <td>My centered table</td> </tr> </table> </body> </html>

No obsolete attributes, such as align, are required.

+1
source

Source: https://habr.com/ru/post/1314862/

More articles:


All Articles