課程
/前端開發(fā)
/HTML/CSS
/從 psd 到 html
設(shè)置margin:0 auto;也不起作用,banner圖不居中
2016-06-11
源自:從 psd 到 html 4-2
正在回答
我猜你應(yīng)該是沒在 reset.css 中設(shè)置 img{display:block}
不過沒設(shè)置也沒事,那img在默認(rèn)css中就是inline元素了,這樣你就不要在index.css的img設(shè)置 margin:0 auto;了,你可以img的父級(jí)元素也就是index-banner-bg中設(shè)置text-align:center就好了嘛,因?yàn)閠ext-align:center就是針對(duì)這種inline元素居中的嘛
我也是這個(gè)情況,不過不知道你是不是一樣。
我發(fā)現(xiàn)我的footer和header的寬度是1500px(我們?cè)O(shè)置的),但是index-banner的寬度是1349px,又進(jìn)一步發(fā)現(xiàn)body的寬度也是1349px,即body的寬度<你設(shè)置的header和footer的寬度,所以我嘗試把body的寬度設(shè)置為1500px,就解決了。這個(gè)解決方法可能不正確,希望知道的人解釋解釋。我推斷這個(gè)可能是瀏覽器的原因,我用的是火狐和谷歌的瀏覽器。
如果你父級(jí)元素用了浮動(dòng)的話,或者img 標(biāo)簽沒有升級(jí)為display:block/inline-block;(包在圖片的外層元素是個(gè)行間元素)margin:0px auto是不起作用的:解決辦法:1:把圖片的外層元素設(shè)置為塊級(jí)元素,或者本身設(shè)置為display:block元素,在margin:0px auto;,若沒有升級(jí)為塊級(jí)元素,在外層,直接text-algin:center;也是可以的。2:或者用css3的盒模型可以解決:外層元素display:block/inline-block;(注意各個(gè)瀏覽器前面得加前綴:例如:谷歌:display:-webkit-block;等),box-pack:Center;
舉報(bào)
教你把PSD設(shè)計(jì)稿轉(zhuǎn)化成HTML,用案例來講解基本流程
1 回答為什么我的菜單會(huì)出現(xiàn)這種問題
3 回答為何切圖時(shí),縮放比例不是按照100%來的,老師這樣任意的放大psd文檔,切出來的圖是會(huì)原搞的psd文檔有出入差別的啊
2 回答瀏覽器縮小,滾動(dòng)橫向滾動(dòng)條,頁面右邊出現(xiàn)白色
2 回答我按照老師講的方法切圖,可是發(fā)現(xiàn)切出的圖比psd上的要大,而且大小各不相同,這是怎么回事?
2 回答banner中的內(nèi)容放置不合適
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-07-07
我猜你應(yīng)該是沒在 reset.css 中設(shè)置 img{display:block}
不過沒設(shè)置也沒事,那img在默認(rèn)css中就是inline元素了,這樣你就不要在index.css的img設(shè)置 margin:0 auto;了,你可以img的父級(jí)元素也就是index-banner-bg中設(shè)置text-align:center就好了嘛,因?yàn)閠ext-align:center就是針對(duì)這種inline元素居中的嘛
2016-07-05
我也是這個(gè)情況,不過不知道你是不是一樣。
我發(fā)現(xiàn)我的footer和header的寬度是1500px(我們?cè)O(shè)置的),但是index-banner的寬度是1349px,又進(jìn)一步發(fā)現(xiàn)body的寬度也是1349px,即body的寬度<你設(shè)置的header和footer的寬度,所以我嘗試把body的寬度設(shè)置為1500px,就解決了。這個(gè)解決方法可能不正確,希望知道的人解釋解釋。我推斷這個(gè)可能是瀏覽器的原因,我用的是火狐和谷歌的瀏覽器。
2016-06-11
如果你父級(jí)元素用了浮動(dòng)的話,或者img 標(biāo)簽沒有升級(jí)為display:block/inline-block;(包在圖片的外層元素是個(gè)行間元素)margin:0px auto是不起作用的:解決辦法:1:把圖片的外層元素設(shè)置為塊級(jí)元素,或者本身設(shè)置為display:block元素,在margin:0px auto;,若沒有升級(jí)為塊級(jí)元素,在外層,直接text-algin:center;也是可以的。2:或者用css3的盒模型可以解決:外層元素display:block/inline-block;(注意各個(gè)瀏覽器前面得加前綴:例如:谷歌:display:-webkit-block;等),box-pack:Center;