At 3/15/2007 02:00 PM, Paul Novitski wrote:
>For example, if the link is the sole contents of the paragraph, you
>could apply {display: block} to the link itself and have it center.At 3/15/2007 02:13 PM, jeffrey morin wrote: > > so here is a test page. the display block worked but like the test says i > > don't know why. any help explaining that? > >http://www.melissagerstein.com/tests/link_align.htm Here's how I understand it: Two kinds of elements in CSS are inline-level (such as plain text and anchors) and block-level (such as paragraphs & divs). Inline elements shrink to the width of their contents, while block-level elements can have width exceeding that of their contents (and in fact their default behavior is to stretch as widely as their own parents allow). Centering makes sense only when the container is wider than the contents. Therefore in order to be centered, text must be contained by a block-level element. If you've got: <a href="#">This is text</a> the anchor is naturally inline and only as wide as the text it contains. No centering effect can be perceived. If you style the anchor {display: block} then in effect what you've got is: <a href="#"> <anonymous>This is text</anonymous> </a> in which the text is in an "anonymous" inline-level element inside a block-level element. Because the anchor can now be wider than the text, you will be able to see centering occur. I strongly encourage you to read the W3C CSS spec. Parts of it are dense but for the most part it's easy & illuminating. The material I'm referring to here is described in these sections: 9 Visual formatting model http://www.w3.org/TR/CSS21/visuren.html 10 Visual formatting model details http://www.w3.org/TR/CSS21/visudet.html Regards, Paul __________________________ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
