gpt4 book ai didi

javascript - 灯箱问题和垂直对齐

转载 作者:行者123 更新时间:2023-11-28 09:57:55 26 4
gpt4 key购买 nike

我正在使用 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 词汇非常陌生,所以我可能使用了一些错误的术语(例如元素选择器(?))

任何提示或指示都非常感谢。

最佳答案

我的问题似乎源于我的 .js 文件之间的一些冲突。我找到了不使用 .js 文件的灯箱替代品。 Futurebox仅使用 1 个 .css 文件和 HTML 代码中的几行,因此通过使用它,我能够避免与 .js 文件发生任何冲突。此外,由于它的简单性,进行图像大小和位置等细微调整也不再那么麻烦。

关于javascript - 灯箱问题和垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24832712/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com