在中心頁面上顯示帶邊框的圖像

我試圖在頁面上顯示一個圖像，並在邊上應該有不同的填充和邊距。這些圖像將具有不同的widhts和高度。所以我需要它相應地拉伸。在中心頁面上顯示帶邊框的圖像

我把這個身體刪除所有邊距：

body { 
    margin:0px 0px; 
    padding: 0px; 
    }

然後我用這把邊界圖像周圍。

#imgcontainer { 
    position:relative; 
    text-align: center; 
    border-color: red; 
    border-width: 1px; 
    border-style: solid; 
    padding: 5px; 
}

但是，然後邊界延伸到整個頁面。有什麼方法可以防止他？如果我放：

position:relative;

邊框捕捉到位，但然後圖像不居中了。

如果我在#imgcontainer周圍放置一個容器盒，它也會捕捉到頁面的邊緣。

我認爲它可以簡單地用一些位置組合來解決：relative/absolute？

這就是我說的：http://kareldc.com/dislexicon/1-motion.html

THX！

來源

2012-09-11 kareldc

添加HTML代碼，請....... –

嗨現在根據@Fabrizo Calderan

CSS作爲這樣

#imgcontainer { 
display:inline-block; 
vertical-align:top; 
}

定義

比你的結果是

enter image description here

來源

2012-09-11 08:43:50

謝謝，它似乎工作！ – kareldc

如果我很好理解，你可以分配到display: inline-block的#imgcontainer問題，否則發佈顯示問題

來源

2012-09-11 08:29:20 fcalderan

這裏是我的意思的例子：http://kareldc.com/dislexicon/1-motion.html – kareldc

你試圖利用我建議？這是期望的效果嗎？ – fcalderan

是的，然後#imgcontainer快照到頂部。 http://www.kareldc.com/dislexicon/1-motion2.html – kareldc

你可以應用邊框效果獨自img標籤小提琴。

例如，只要把

#imgcontainer img { 
     border-color: red; 
     border-width: 1px; 
     border-style: solid; 
    }

來源

2012-09-11 08:42:18

這是給你一個答案：fiddle example

來源

2012-09-11 08:42:36 alexbusu

[返工示例]（http://jsfiddle.net/QKcTb/2/） – alexbusu

在中心頁面上顯示帶邊框的圖像

回答

相關問題