javascript - 灯箱问题和垂直对齐

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仅使用 1 个 .css 文件和 HTML 代码中的几行，因此通过使用它，我能够避免与 .js 文件发生任何冲突。此外，由于它的简单性，进行图像大小和位置等细微调整也不再那么麻烦。