cangkukuaimanle——你滿了麼
阿新 • • 發佈:2018-12-31
網頁中如下圖,需要在頁面底部中間固定一個塊,當然用positon:fixed來控制,然後bottom:0px;能讓其在底部,但是在中間怎麼處理呢?
最先想到的是用js或者jquery算螢幕的寬度A,然後減去紅色框的寬度B,那麼它的left值為(A-B)/2 px;
其實有更簡單的,只需要css來控制,程式碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .test { border:1px solid red; position:fixed; bottom:0px; bottom:0px; left:0px; right:0px; margin:auto auto; height:50px; width:200px; } </style> </head> <body> <div class="test"></div> </body> </html>
重要之處就是left:0px;right:0px;margin:auto auto;
經測試在ie8、9、10,chrom、firefox中均正常