Today I learned how to vertically center a button within a <div>.
I thought that I could apply this to help you solve your problem too but this is not the case.
I think the reason is because a table is treated as a block of data and by default has a display style set to "block"; whereas the button element is not a block of data and has a default display style set to "inline".
I created a simple table:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head runat="server">
-
<title></title>
-
</head>
-
<body>
-
<table id="someTable" class="myTableStyle" border="1px">
-
<tr>
-
<td>colum1 row1</td>
-
<td>column2 row1</td>
-
</tr>
-
<tr>
-
<td>colum1 row2</td>
-
<td>column2 row2</td>
-
</tr>
-
</table>
-
</body>
I then started trying to align this in the center of the page using CSS alone.
Centering the table horizontally was pretty easy.
As I said before, tables are treated as blocks of data and so, by default, have a display style set to "block". In order to align a element with a display style set to "block", you need set it's width style. Once the width has been set you can use the margin style to horizontally align the element in the middle of it's parent element (in this case the parent element is the <body> element).
-
<style type="text/css">
-
.myTableStyle
-
{
-
width:200px;
-
-
/*
-
Now that the width has been set, we can use
-
the margin style to center it horizontally.
-
It will center horizontally by setting the
-
margin-left and margin-right styles to 'auto'
-
-
The following style sets the margin-left,
-
margin-right, margin-top, and margin-bottom to 'auto'.
-
Alternatively you could do:
-
margin:0px auto;
-
This will set the margin-top and margin-bottom to 0px and
-
the margin-left and margin-right to auto.
-
-
You can also specify each one:
-
margin:5px auto 10px auto;
-
This will set the margin-top to 5px, bottom to 10px,
-
and left & right to auto.
-
-
Or you can simply do:
-
margin-left:auto;
-
margin-right:auto;
-
*/
-
-
-
margin: auto;
-
}
-
</style>
-
To align an "inline" element vertically in the center you could simply set it's position to "relative" and move it down from the top of it's parent element by 50%. However this will not work with a block element.
So why don't you just set the display style of the table element to "inline" you ask?
Because the table rows and data are blocks as well and the content will be somewhat messed up. If you set these to "inline" as well you will lose table layout of your table.
The only solution I've found is to set the position of the table to either absolute or fixed and move the table 50% from the top (or bottom) and 50% from the left(or right).
-
-
<style type="text/css">
-
.myTableStyle
-
{
-
position:absolute;
-
top:50%;
-
left:50%;
-
-
/*Alternatively you could use: */
-
/*
-
position: fixed;
-
bottom: 50%;
-
right: 50%;
-
*/
-
-
-
}
-
</style>
Setting the margins of the table once it has a position of absolute or fixed will have no effect on how the element centered...so it's not necessary to set them for this example.
There are 2 things to note about using this method to center your table:
The first thing is that the table will be moved to 50% from the left and 50% from the top. This means that the top left corner of the table will be moved to the center and the table will be drawn from there. So, the top of your table will be in the center of the window and the rest of the table will be below this point.
To get around this, you should set the height and width of the table to some percentage of the page and subtract half of that value from the top value and left value:
-
-
<style type="text/css">
-
.myTableStyle
-
{ position:fixed;
-
height:50%;
-
width:50%;
-
top:25%;
-
left:25%;
-
/*Alternatively you could use: */
-
/*
-
bottom:25%;
-
right:25%;
-
*/
-
}
-
</style>
Please be aware that setting the height to 50% when using a position:absolu te doesn't actually do anything to the table; however setting the height to 50% when the table has a fixed position will effect the table's height.
The second thing to note is that setting the table's position to absolute or fixed will draw the table in such a way that it is no longer positioned relative to the rest of the page's content. As such it will appear to "float on top of" any other content in the page.
-Frinny
1
