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/
