Sun, 2011-12-25 20:21
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
Sun, 2011-12-25 23:33
#1
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
Mon, 2011-12-26 03:06
#2
thanks, that did it.
thanks, that did it.