I'm using Lightbox to popup an image when a page loads. However, I'm struggling to get the popped up image to appear in the center of my screen. The image pops up in the horizontal center by default, but not the vertical center.
I've looked up this issue, and have come across a few solutions. These solutions all suggested adding various lines of code to the lightbox.css file. for example:
#Lightbox {
vertical-align:middle;
position:fixed;
}
and
#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}
(from css vertically centering a fixed positioning div)
I have tried these solutions as well as many others, but to no avail. I'm not sure if i'm even applying these solutions properly. I have been copy/pasting the segments onto the end of the CSS code, or under the appropriate element selector (eg. ".lightbox").
example attempt:
.lightbox {
position: fixed;
vertical-align: middle;
left: 50%;
top: 50%;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
Also, all of the suggestions have been using "#lightbox{...}", but all of the segments in the lightbox.css look like ".lightbox{...} " Why do the suggestions use "#" while the lightbox.css file itself use "." Should I be using "#" or "." when testing solutions?
I realize that this is a really long winded question, but I'm honestly stumped and quite frustrated. I also would like to apologize for the lack of clarity in my question. I'm very unfamiliar with CSS vocab, so I might be using some terms wrong (eg. element selector(?))
Any tips or pointers is immensely appreciated.
My issue seems to have stemmed from some conflict between my .js files. I found an alternative for lightbox that does not use .js files. Futurebox operates with just 1 .css file and a few lines in your HTML code, so by using this I was able to avoid any conflicts with .js files. Also, due to its simplicity, making slight adjustments such as image size and position was much less of a hassle.