Thanks guys for the clarification and suggested solutions - it helps! Elli
--- On Wed, 7/9/08, Bill Brown <[EMAIL PROTECTED]> wrote: > From: Bill Brown <[EMAIL PROTECTED]> > Subject: Re: [css-d] Centering Element W Absolute Positioning? > To: "Adam Ducker" <[EMAIL PROTECTED]> > Cc: [EMAIL PROTECTED], "CSS Discuss" <[email protected]> > Date: Wednesday, July 9, 2008, 3:32 PM > Adam Ducker wrote: > > Elli Vizcaino wrote: > >> I have a link that I've absolutely positioned > in a relatively > >> positioned container so that it sits 50px up from > bottom of > >> container. In order for me to get the link to look > centered I had > >> to style it like so: > >> > >> #jobad {position: relative; width: 298px; height: > 250px; border: > >> 1px solid #000;} a {position: absolute; left: > 76px; bottom: 50px;} > >> > >> I wanted to give the left property a value of 50% > but that didn't > >> exactly center it. So I resorted to using a pixel > value. Can > >> someone explain why declaring "left: > 50%" didn't work? > >> > > Elli: > > > > It appears that "left: 50%" is putting the > link's left most position > > at 149px, which is 50% of 298px. This is using the > leftmost edge of > > the link, not the center of the link like you want, > which is why it > > looks funny. > > > > There are other options you can explore for centering > your link other > > than absolute positioning if you have other options > available... > > > > -Adam Ducker > > Hi Ellie, > > Adam's explanation is dead-on. I've included a code > snippet which should > give you the effect I think you want in most browsers > (except FF2 which > I think lacks support for display:inline-block). It > requires a wrapper > element, but should do what ya need. > > Here's the code. Hope it helps. > --Bill > > PS to Ellie: CSS-D has been working fine for me over the > past week. In > fact, you've missed some good messages if you've > not been receiving > these last seven days or so. More soon (I promise). > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML > 4.01//EN" > > "http://www.w3.org/TR/html4/strict.dtd";> > <html><head> > <title>style{position:absolute;center:horizontal;}</title> > <style type="text/css"> > div.spach { > position: absolute; > text-align: center; > left: 0; > right: 0; > } > h1 { > background: #dedede; > border: 1px solid #999999; > color: #666666; > display: inline-block; > font-family: sans-serif; > padding: 10px; > } > </style> > <!--[if IE]><style type="text/css"> > div {width: 100%;} > h1 {display: inline; > zoom: 1;} > </style><![endif]--> > </head><body> > <div > class="spach"><h1>TheHolierGrail:active{version:2.0}</h1></div> > </body></html> > > -- > /** > * Bill Brown > * TheHolierGrail.com & MacNimble.com > * From dot concept...to dot com...since 1999. > ***********************************************/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
