I keep getting "warnings" from VS2005 that <div align="center"> is not suggested anymore, but other than surrounding elements with <center> tags, I don't know of another way to center child elements in a div.
Text-align: center will work, but only for text...
Anybody know of a standards-compliant alternative?
-
Follow
Oops, something didn't work.
Sign In to be begin to follow this thread
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.Getting "follow" information
Start following this thread
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.Removing your "follow"
Setting up your "follow"
Did you know you can
sign up for email notifications?
-
jsampsonPC
SampsonBlog.com SampsonVideos.com
-
W3bbo
Work hard; increase production; prevent accidents, and be happy.
text-align: center; does the same thing as <center> or <div align="center">. What behaviour are you missing?
-
jsampsonPC
SampsonBlog.com SampsonVideos.com
In the following example, if you applied "Text-Align: Center;" to the ParentContainer id, it would center the text, but not the child-table.
I'm looking for the traditional effect of centering everything one-level deep with <div align="center" id="ParentContainer". You can still get an effect similar, by setting auto margins to the #tabularData object, so I think I may go that route.
<div id="ParentContainer">
<p>This is a paragraph in the first container.</p>
<table id="tabularData">
<tbody>
<tr>
<td>Name:</td>
<td>Age:</td>
</tr>
</tbody>
</table>
</div> -
W3bbo is wrong (amazing, I know) - text-align will only center text, it doesn't affect img tags or anything.
<div style="margin: auto">
is the standards way of centering a div. -
Your example code works fine - both table and p are centered
does your real life code wrap the table in another layout and has that layout got a different align set?
<head>
<title>Untitled Page</title>
<style type="text/css">
#ParentContainer
{
Text-Align:Center;
}
#sub
{
Text-Align:left;
table
{
Text-Align:right;background-color:red
}
</style>
</head>
<body>
<div id="ParentContainer" >
<p>
This is a paragraph in the first container.</p>
<div id="sub">
<table id="tabularData">
<tbody>
<tr>
<td>
Name:</td>
<td>
Age:</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html> -
Matthew van Eerde
AKA Maurits
Antitorgo wrote:text-align will only center text, it doesn't affect img tags or anything.
Well, technically, text-align affects inline elements. img tags are "inline" (as opposed to blocks) so it will affect img tags. But table, div, p, etc. are block elements, so it won't affect those.
-
Sven Groot
Don't worry... I'm a doctor.
Margin:auto is indeed the correct way of doing it. Note that you need to set margin:auto on the element you want centered, not on the element containing the elements that should be centered.
Margin:auto also doesn't work on IE5.x and earlier (don't know if that's important to you).
-
W3bbo
Work hard; increase production; prevent accidents, and be happy.
Antitorgo wrote:W3bbo is wrong (amazing, I know) - text-align will only center text, it doesn't affect img tags or anything.
Wrong. As Maurits correctly states, text-align affects all inline elements, including the img element (and it's text-align:; not Text-Align; )
"margin: auto;" doesn't semantically mean to center something, it just zeros the top and bottom margins, and defaults the left and right margins to the same value ("filling" unused space), it just so happens that it centers things.
Antitorgo wrote:<div style="margin: auto"> is the standards way of centering a div.
There are no web "standards", they're Technical Recommendations and Specifications, there were only a few web Standards (and they were long ago, back when the IETF was in charge). And even then, the W3C doesn't recommend using inline styles
-
stevo_
Human after all
Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.
-
Sven Groot
Don't worry... I'm a doctor.
stevo_ wrote:Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.
FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do. -
jsampsonPC
SampsonBlog.com SampsonVideos.com
Sven Groot wrote:
stevo_ wrote:Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.
FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do.
You "nerds" and your technicalities
-
Sven Groot
Don't worry... I'm a doctor.
jsampsonPC wrote:
Sven Groot wrote: stevo_ wrote: Personally I use margin: 0px Auto and text-align: center on its parent, just to make sure.
FYI: you don't have to specify a unit when you use 0. Just margin: 0 auto will do.
You "nerds" and your technicalities
If you want to get really technical, since the computed value of "auto" for margin-top and margin-bottom is 0, just "margin:auto" actually has precisely the same effect as "margin: 0 auto".
-
stevo_
Human after all
Well personally I avoid misinterpretation by marking up like that, I always ensure I provide units if I'm giving numic values, and while the Auto is generally true, I always tend to use 0px Auto because its reassuring to me that the design is interpretted correctly under as many conditions as possible.
-
ewschone
Let me get some coffee first
Usually I put this in the style sheet
.centered
{
margin-left:auto;
margin-right:auto;
}
and then use <div class="centered"></div> around the stuff that needs to be centered.
-
W3bbo
Work hard; increase production; prevent accidents, and be happy.
stevo_ wrote:I always tend to use 0px Auto because its reassuring to me that the design is interpretted correctly under as many conditions as possible.
*stunned silence*
there isn't a single UA out there that fails to recognise "0" with or without a unit as "zero".
-
stevo_
Human after all
Well I guide myself on w3c's recommendations, and whenever they markup pixel measurements, they ensure its stated explicitely. There may or may not be a reason for this- but without trying to be offensive, I trust their guidelines more than yours, and as I said- its reassuring for me that I am telling the browser exactly what I mean and only needing to add two characters to the measurement.
-
W3bbo
Work hard; increase production; prevent accidents, and be happy.
stevo_ wrote:Well I guide myself on w3c's recommendations, and whenever they markup pixel measurements, they ensure its stated explicitely. There may or may not be a reason for this- but without trying to be offensive, I trust their guidelines more than yours, and as I said- its reassuring for me that I am telling the browser exactly what I mean and only needing to add two characters to the measurement.
Where do they state to use pixel measurements explicitly?
...and the W3C and the rest of the world actually recommends against using pixel measurements, since they don't scale well for non-traditional devices.
-
stevo_
Human after all
All their markup examples use px, and I think your getting confused because- margin: 0 auto; is the same as margin: 0px auto (although my point is not trusting the default). So regardless- I've been doing CSS for years, and I'm sure I understand it well enough. The concerns with px are that it doesn't scale- but some if not all designs are dependant at most point on having measurements to be pixel perfect, and IE does scale pixel measurements on fonts anway.
Thread Closed
This thread is kinda stale and has been closed but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.