html - Center a DIV at bottom of page -
i'm trying center div @ bottom of page , having no luck. i've scoured web, keep turning nothing when attempting apply solutions.
any chance out there might have solution? see code below:
<!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script></script> <style type="text/css"> body { background-color: aqua; height:100%; min-height:100%; } .centerdiv { display: table; width:90%; margin:0 auto; height:100%; min-height:100%; text-align: center; } .box { display: inline-block; width: 100px; height:100px; border: 3px solid #fff; } </style> </head> <body> <div class="centerdiv"> <div class="box box1" style="background-color:#585858;"> </div> <div class="box box2" style="background-color:#118c4e;"> </div> <div class="box box3" style="background-color:#c1e1a6;"> </div> <div class="box box4" style="background-color:#ff9009;"> </div> </div> </body> </html>
i think mean, div @ bottom of page. you:
.centerdiv { display: block; width: 100%; margin: 0 auto; height: auto; text-align: center; position: fixed; bottom: 0; }
setting position fixed
, div stay @ place anytime (also when scroll down).
Comments
Post a Comment