這樣的一個頁面如何佈局問題。html
上面生成試題部分很簡單,一個滿橫屏,而後居中。瀏覽器
<style> h2{height:100px;background:xx;text-align:center;line-heihgt:100px;} </style> <h2>生成試題</h2> <div>那一大坨東西,上面考試碼,按鈕啥的都包括</div>
下面的怎麼佈局?我當時困惑的是,下面文字部分不是居中,若是用padding和margin總感受哪裏不對?佈局
是了,若是用padding-left或者margin-left讓下面的文字與上面生成試題幾個字位置關係到位的話,確定不行。由於,生成試題的位置會隨着瀏覽器寬度而改變。當寬度變小時,生成試題幾個字仍是在屏幕中間,而因爲padding-left或者margin-left是固定值,極可能會超過屏幕寬度而超出。spa
那怎麼辦呢?一種方法是將h2和div套一個父元素,這2個元素基於同一個父元素進行定位,這樣就能保證位置始終相對一致。 code
第二種方法更簡單,h2是基於瀏覽器進行定位的,那只要div也給予瀏覽器窗口定位,那h2和div之間的位置關係就不會改變了。htm
h2居中,設置div也居中,爲了讓div中的文字和h2中某個位置對應,使用margin偏移下,這樣,h2始終居中,div始終在居中的偏左或偏右的位置,這樣h2和div的相對位置就永遠不會發生改變了!it
<style> h2{height:100px;background:xx;text-align:center;line-heihgt:100px;} div{position:absolute;top:100px;left:50%;margin-left:-200px;} </style> <h2>生成試題</h2> <div>那一大坨東西,上面考試碼,按鈕啥的都包括</div>
注意:若是咱們寫left:300px,則margin-left將再也不起做用,你們細細一想就明白爲何了。io