如何在頁面中心對齊燈箱2？

我正在畫廊工作。每件事情都可以正常工作，只不過燈箱畫廊比屏幕中心略高一點。如何在頁面中心對齊燈箱2？

應該動態地放置在畫面中央的覆蓋，但由於某種原因它沒有這樣做，在我的情況。當我調試的代碼則顯示主燈箱容器屬性：

<div id="lightbox" style="display: block; top: 189.4px; left: 0px;">

第二個問題：我怎麼還可以添加照片的描述到燈箱因爲現在它只是顯示照片的標題。我其實需要添加照片的描述和日期。

只是爲了更清楚我加入了截屏來顯示它的外觀我的屏幕上：

[在這裏輸入的形象描述] [1]

從這個截屏可以清楚燈箱從頂部開始：75像素，這不會使圖像垂直對齊屏幕中間。

2012-07-08 Learning

我不明白請給出更多細節Thx – yossi 2012-07-08 07:22:13

@Youssi，我添加了圖像的屏幕來解釋我真正想要的 – Learning 2012-07-08 07:33:09

您的示例鏈接已死，導致錯誤頁面：「內部錯誤：/ en/Album- Photos.aspx」。沒有一點離開它，如果你發現不同的鏈接可以自由地編輯它回來。 – 2013-08-13 12:46:09

我遇到了同樣的問題。垂直對齊取決於屏幕高度，但不考慮圖像大小。我的問題是以縱向模式拍攝的照片溢出了頁面，因此我決定修改lightbox代碼以將所有圖像向上移動。如果您事先知道所有圖片的大小相同，那麼您理論上可以將此值更改爲任何您需要的值（您必須自行完成該計算。請在燈箱內查找此部分代碼JS並相應修改

o=f.scrollTop()+f.height()/10;n=f.scrollLeft();this.$lightbox.css({top:o+'px',left:n+'px'}

另外，在燈箱CSS文件中，查找.lightbox並添加以下內容：。

top: 0px !important;

修改0像素值，無論你計算

要添加描述給lig htbox，請設置<img>標記的alt屬性。

2013-09-05 06:46:24

回答