Question

我正在使用Lightbox在页面加载时弹出图像。但是，我很难让弹出的图像出现在我的屏幕中央。默认情况下，图像会在水平中心弹出，但不会显示垂直中心。

我已经查到了这个问题，并且遇到了一些解决方案。这些解决方案都建议在lightbox.css文件中添加各种代码。例如：

#Lightbox {
vertical-align:middle;
position:fixed;
}

和

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}

（来自css vertically centering a fixed positioning div）

我尝试过这些解决方案以及其他许多解决方案，但无济于事。我不确定我是否正确应用这些解决方案。我已经将段复制/粘贴到CSS代码的末尾，或者在相应的元素选择器下（例如“.lightbox”）。

示例尝试：

.lightbox {
position: fixed;
vertical-align: middle;
left: 50%;
top: 50%;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}

此外，所有建议都使用了“#lightbox {...}”，但是lightbox.css中的所有细分都看起来像“.lightbox {...}”为什么建议使用“＃ “而lightbox.css文件本身使用”。“我应该使用“＃”还是“。”在测试解决方案时？

我意识到这是一个非常冗长的问题，但我老老实实地感到难过并且非常沮丧。我还要为我的问题缺乏明确性而道歉。我对CSS词汇非常不熟悉，所以我可能会使用一些错误的术语（例如。元素选择器（？））

任何提示或指示都非常受欢迎。

Answer 1

我的问题似乎源于我的.js文件之间的一些冲突。我找到了一个不使用.js文件的灯箱替代品。 Futurebox仅使用.css文件和HTML代码中的几行进行操作，因此通过使用此功能，我可以避免与.js文件发生任何冲突。此外，由于其简单性，进行轻微调整，如图像大小和位置是一个麻烦。

灯箱问题和垂直对齐

1 个答案: