因此對於很多年來,我一直在努力實現這一目標。基本上我的網站允許管理員上傳目錄中每個項目的縮略圖和放大圖像。縮略圖顯示在顧客看到的頁面上,放大顯示在縮略圖的懸停上。使用CSS和HTML的垂直和水平居中的可變大小的圖像放大(以div爲單位)
我無法控制正在上傳的圖像的大小(我想我可以限制寬度和高度,但在這種情況下這是不實際的)。
我想垂直和水平居中這個圖像放大。它包含在與position: fixed;
的div中。我相信,(雖然我沒有在那一刻我前面的代碼),我目前使用類似以下內容:
.image-enlargement
{
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 400px;
margin-left: -150px;
margin-top: -200px;
}
我可能已經改變了它使用jQuery - 我可以」不過請記住,很久以前,我上次在網站上的這一點上工作過。現在我想要對上面的代碼做的是取出寬度,高度和邊距規格,以便允許圖像(無論大小)精確居中,並且不使用JavaScript。
有沒有人曾經實現過這個?如果是這樣,怎麼樣?我確信必須有某種方法來實現這個結果,但還沒有遇到純粹的CSS/HTML解決方案。
編輯:JSFiddle在http://jsfiddle.net/Y7xAp/。
只是增加了一個JSFiddle與我最近的嘗試 - obv因爲-50%的邊距使用容器的寬度/高度,所以它不起作用。儘管如此,我應該相對容易地看到我正在嘗試做什麼。 – ClarkeyBoy 2011-01-27 03:17:43
可能重複的[如何水平和垂直居中div?](http://stackoverflow.com/questions/4325643/how-to-horizontal-vertical-center-a-div) – Phrogz 2011-01-27 03:22:26
另請參見http:// stackoverflow .com/questions/2726219/position-div-center-horizontal-and-vertical和http://stackoverflow.com/questions/2498552/horizontal-and-vertical-center-text-in-html和http:// stackoverflow .com/questions/4416130/how-to-center-a-div-vertical和http://stackoverflow.com/questions/4460677/css-trick-for-centering-horizontal-and-vertical ...等。 – Phrogz 2011-01-27 03:23:08