灯箱问题和垂直对齐

我正在使用灯箱来加载页面时弹出图像。但是，我正在努力让弹出的图像出现在屏幕的中心。默认情况下，图像在水平中心弹出，但不是垂直中心。灯箱问题和垂直对齐

我查了这个问题，并遇到了一些解决方案。这些解决方案都建议将各种代码行添加到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 vocab非常不熟悉，所以我可能会使用一些术语错误的（例如，元素选择符（？））

任何任何提示或指针都非常值得赞赏。

来源

2014-07-18 jimjam

'＃'是ID，'.'是CLASS。类可以在ID是单个使用项的页面上重用。如果不止一次使用，只有第一个实例才能工作。检查http://www.codecademy.com一些引物。请谨慎使用w3schools.com。 – Phlume

只关注垂直居中问题。看到这里的CSS垂直居中http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css通常我的方法是根据需要得到一些工作首先在静态页面上担心动态元素，比如javascript。至于你的“互动”，你可以把HTML和CSS看作是显示。你的程序产生的输出是HTML和CSS，然后在浏览器中呈现 – Brandin

谢谢你的指针。我一直在使用w3schools，你是对的，它确实引发了一种隧道视觉方法来编码。我已经更新了一下这个问题，你介意再看一次吗？不胜感激！ – jimjam

我的问题似乎源于我的.js文件之间的一些冲突。我找到了一个不使用.js文件的灯箱替代品。 Futurebox只需在您的HTML代码中使用1个.css文件和几行代码即可运行，因此通过使用此代码，我可以避免与.js文件发生冲突。而且，由于其简单性，进行诸如图像大小和位置的轻微调整就更不麻烦了。

来源

2014-07-22 18:48:51 jimjam

灯箱问题和垂直对齐

回答

相关问题