使用利潤對一個div

我試圖用margins.I我給圖標％的寬度和在％高度定心的圖標的方法too.I中心有一個圖標使用利潤對一個div

.container{ 
width:600px; 
height:200px; 
background-color:orange; 
} 
img { 
width:6%; 
margin-left:47%; 
margin-right:47%; 
height:16%; 
margin-top:12%; 
margin-bottom:12%; 
} 
body{ 

}

的方法水平而不是居中圖標vertically.I不知道爲什麼這不會工作

img { 
    width:6%; 
    margin-left:47%; 
    margin-right:47%; 
    height:16%; 
    margin-top:42%; 
    margin-bottom:42%; 
    }

我也有這個小提琴，但我已經使用了上邊距和下邊距是隨機http://jsfiddle.net/thiswolf/EKWWt/

來源

2012-09-27 Gandalf

對於固定佈局：http://jsfiddle.net/EKWWt/2/ – Dev

使用百分比'與容限[頂|底部]'將給出該元素的* width *百分比的餘量。 'margin- [top | bottom]：n％'不是你想要的。 – thirtydot

那是什麼元素？ – Gandalf

由於防火牆廢話，我看不到您的圖像，但請看看這個answer。另外這裏是我的forked fiddle。

.container{ 
    width:600px; 
    height:200px; 
    background-color:orange; 
    text-align:center; 
    line-height:138px; /*You'll have to play around with this value*/ 
} 

img { 
    vertical-align:middle; 
}

來源

2012-09-27 11:48:15 John

'line-height：200px;'//對於確切的盒子，這很酷:) – Dev

我有一個小提琴http://jsfiddle.net/thiswolf/HDN4M/但我在bootstrap.UPDATE上測試它：Works在twitter引導也。 – Gandalf

@Dev我猜測，高度的高度和div的高度必須相同？ – John

嘗試機智h：

.container{ 
width:600px; 
height:200px; 
background-color:orange; 
} 
img { 
margin:12% 50%; 
}

來源

2012-09-27 11:43:41

您可以試着將圖標放在背景中作爲替代。如果需要它在html中，因爲它是動態加載的，那麼你可以使用javascript來代替它作爲背景。

來源

2012-09-27 11:44:22 FluffyJack

我認爲圖像是從身體而不是從容器格利潤邊緣。水平和垂直居中圖像可以設置位置：相對;在容器div和位置：絕對;在img元素中。這可能是可能的解決方案之一。

所以CSS可以這樣......

.container{ 
    width:600px; 
    height:200px; 
    background-color:orange; 
    position: relative; 
} 
img { 
width:6%; 
margin-left:47%; 
margin-right:47%; 
height:16%; 
margin-top:42%; 
margin-bottom:42%; 
    position: absolute; 
}

來源

2012-09-27 11:58:41 RVC

使用利潤對一個div

回答

相關問題