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

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: 2 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9186
Points: 3191

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

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

thanks, that did it.

thanks, that did it.