如何在页面中心对齐灯箱2？

问题描述：

我正在画廊工作。每件事情都可以正常工作，只不过灯箱画廊比屏幕中心略高一点。如何在页面中心对齐灯箱2？

应该动态地放置在画面*的覆盖，但由于某种原因它没有这样做，在我的情况。当我调试的代码则显示主灯箱容器属性：

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

第二个问题：我怎么还可以添加照片的描述到灯箱因为现在它只是显示照片的标题。我其实需要添加照片的描述和日期。

只是为了更清楚我加入了截屏来显示它的外观我的屏幕上：

[在这里输入的形象描述] [1]

从这个截屏可以清楚灯箱从顶部开始：75像素，这不会使图像垂直对齐屏幕中间。

我不明白请给出更多细节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属性。