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