0

I am building a photo gallery viewer using javascript and css, but i cant center the elements. I have a back arrow photo, the photo itself, and the next arrow. these 3 photos are one next to each other, and I need to center all three of them. Any help is appreciated, and also, I am kind of new to css/javascript/html, so dont be so hard on me. Thank you, Guy Z.

(you can go to guyzyl.org, enter any gallery and click on a photo to see what I mean, and what I am trying to center)

guyzyl
  • 387
  • 5
  • 18
  • 2
    Can you post the relevant HTML? It would be easier for some of us to answer your question that way. Cheers. – Maciej May 18 '12 at 14:50

3 Answers3

1

This style should help:

#viewer {
   text-align: center;
   white-space: nowrap;
}

Also, use a DOCTYPE.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

You need to give

<div id="viewer"></div>

a fixed width and set it's left and right margins to auto.

The CSS looks like this:

#viewer{
    width:500px;
    margin-left:auto;
    margin-right:auto;
}

To prevent the arrows from wrapping around you need to resize your photos to fit within the width of the viewer minus the width of the arrows and any padding, margins, or borders on them.

Knyri
  • 2,968
  • 1
  • 17
  • 24
  • first of thanks for the quick answer, and i have a few follow up questions: 1. can i set a fixed width that is bigger then the actual window size? 2. how to do resize to photo according to the width of the viewer minus the width of arrows and padding...? and thanks again – guyzyl May 18 '12 at 14:59
  • @guyzyl I don't think a fixed width is necessary. Try it without one first. Yes, you can give a div a width that is wider than the window, but then you get a horizontal scrollbar that isn't needed in many cases. Also, the pictures are wider than 500 pixels. – Mr Lister May 18 '12 at 15:05
  • I want the pictures to be as big as possible, so I am not going to make them smaller for now – guyzyl May 18 '12 at 15:10
  • Yeah. Now that I see Mr Lister's answer. That would be the way to go since it is just images in the div (used to much more complicated set-ups.) – Knyri May 18 '12 at 15:10
0

Just looked at your site. Try adding the CSS below to the styles for your Viewer div

margin: auto;

That 'should' center the div on screen. Assuming there is enough space in the browser window.

theste
  • 1
  • 1