Forum Moderators: open
is this the correct usage of <div> to center a table?
Nick
i fixed the issue though am not satisfied with the fix: by doing <td align="left"> the cell's content remained in place.
thanks for the advices, though.
A CSS solution for centering a div would be
div {
margin-right:auto;
margin-left:auto;
}
which tells the browser to make the right and left margins equal and automatically fill up the allowable width.
Related Thread [webmasterworld.com]
Like:
div { align:center; }
Tedster: I think that the table would have to have a fixed width for that to work right?
Nick
div {
margin-right:auto;
margin-left:auto;
}
Here comes the bytes-saver :-)
div{margin:0 auto;}
is the shortened version and does the same. The first one ("0") goes for top and bottom, and the second ("auto") for left and right, if you fill in only two values.
Try it:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Untitled
</title>
<style type="text/css">
body {
margin:0;
padding:0;
background:#999;
}
.margin-test {
margin:auto;
color:#000;
background:#fff;
border:1px dotted #000;
text-align:center;
}
</style>
</head>
<body>
<div class="margin-test">
<pre>
What thou lovest well remains,
the rest is dross
What thou lov'st well shall not be reft from thee
What thou lov'st well is thy true heritage
Whose world, or mine or theirs
or is it of none?
First came the seen, then thus the palpable
Elysium, though it were in the halls of hell,
What thou lovest well is thy true heritage
What thou lov'st well shall not be reft from thee
(EZRA POUND, PISAN CANTOS, LXXXI)
(public domain poetry)
</pre>
</div>
<div class="margin-test">
<pre>
Stopping By Woods On A Snowy Evening
Robert Frost
Whose woods these are I think I know.
His house is in the village, though;
He will not see me stopping here
To watch his woods fill up with snow.
My little horse must think it queer
To stop without a farmhouse near
Between the woods and frozen lake
The darkest evening of the year.
He gives his harness bells a shake
To ask if there is some mistake.
The only other sound's the sweep
Of easy wind and downy flake.
The woods are lovely, dark, and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
(public domain poetry)
</pre>
</div>
</body>
</html>
Then test it with a new margin setting:
.margin-test {
margin:20px;
color:#000;
background:#fff;
border:1px dotted #000;
text-align:center;
}
Of course, the borders and padding can be altered to suit as well....
