0

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.

Community
  • 1
  • 1
jimjam
  • 37
  • 5
  • 1
    `#` is ID and `.` is CLASS. Classes can be reused on a page where an ID is a single use item. if used more than once, only the first instance will work. check out http://www.codecademy.com for some primers. Please use w3schools.com with caution. – Phlume Jul 18 '14 at 19:52
  • 1
    Focus your question on just the issue of vertical centering. See here for that CSS vertical centering http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css Generally my approach is get something to work as needed on a static page first before worrying about dynamic elements like javascript. As to your "interaction" you can think of HTML and CSS as the display. Your program produces output which is HTML and CSS which then gets rendered in the browser – Brandin Jul 18 '14 at 19:56
  • Thank you both for the pointers. I have been using w3schools a lot, and you're right, it does kind of induce a tunnel-vision approach to coding. I've updated the question a little bit, would you mind taking a look again? Greatly Appreciated! – jimjam Jul 18 '14 at 20:41

1 Answers1

0

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.

jimjam
  • 37
  • 5