2 replies [Last post]
jimeast
jimeast's picture
Offline
newbie
Boulder Creek
Last seen: 2 weeks 13 hours ago
Boulder Creek
Timezone: GMT-7
Joined: 2011-12-25
Posts: 5
Points: 8

I'm trying to place a link 70px from the bottom centered horizontally. I can do either but not both.

#myLink {position:absolute; bottom:70px;} this works

#myLink {width:250px; display: block; margin-left:auto; margin-right:auto;} this works

#myLink {position:absolute;
bottom:70px;width:250px;
display: block;
margin-left:auto;
margin-right:auto;}

the absolute position works but the horizontal center doesn't

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9545
Points: 3599

You've found that absolute

You've found that absolute positioning has limits. There is a way to do it, but the method is fragile, so I won't go that direction.

Use two steps; put a containing box absolutely at the bottom, then center its content.

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Test document</title>
 
    <style type="text/css">
      body {
        background-color: white;
        color: black;
        font: 100%/1.25 helvetica, arial, sans-serif;
        margin: 0;
        padding: 0;
        }
 
      p {
        font-size: 1em;
        margin: 1.25em 0;
        }
 
      #linkholder {
        bottom: 0;
        position: absolute;
        text-align: center;
        width: 100%;
        }
 
    </style>
  </head>
  <body>
    <p id="linkholder">
      <a href="http://example.com/">Link to nowhere</a>
    </p>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jimeast
jimeast's picture
Offline
newbie
Boulder Creek
Last seen: 2 weeks 13 hours ago
Boulder Creek
Timezone: GMT-7
Joined: 2011-12-25
Posts: 5
Points: 8

thanks, that did it.

thanks, that did it.