Trying to get images in the center

HTML & CSS
1

Hi all,

I’m hoping someone could help with this, seems pretty simple but I just can’t seem to get this to work correctly. I’m just trying to display some ad boxes in the sidebar of my site but they will just not sit in the center.

This is the code I’m using:

<div class="ad-box">
ad code here
</div>

In our style.css I have:

#sidebar .ad-box {
    background:url(images/border01.gif) repeat-x;
    height:1%;
    padding:0 13px 2px 16px;
    overflow:hidden;
    margin:16px 0 0;
}
#sidebar .ad-box ul {
    height:1%;
    padding:0;
    margin:8px 0 0;
    list-style:none;
    overflow:hidden;
}
#sidebar .ad-box ul li {
    float:left;
    margin:18px 0 0;
    padding:0 19px 0 0;
}
#sidebar .ad-box ul img {
    display:block;
    border:1px solid #ddd;
}

I’m not a coder/designer but I would normally use trial and error with this type of stuff however nothing seems to work. This code was part of the original template I had coded a few years back which I was hoping would work.

Here is a screen shot of how it looks at the moment, as you can see there is too much space on the right side.

Any help/advice would be appreciated.

Thanks

2

If the sidebar has a fixed width, you could put some left margin on it to move it over. Or, if you know the width of the UL or the containing div, you could set the width in CSS and then set the left and right margins to “auto”.

We could give you a definite answer in a jiff if we had a live link. Is this online?

3

Hi Ralph,

Thanks for the quick reply.

Here is a content page from the site, I’ve removed the above ad code but you can see the rest of the sidebar there.

Thanks

4

If you want help centering it, we’d need to see it in there to know what code to target. Can you put it back in?

5

OK, sorry, it’s displaying now.

6

Try adding this to your style sheet:

#bsap_1280001 {
  width: 260px;
  margin: 0 auto;
}
7

That worked, thanks so much for the help Ralph!

8

You’re welcome. :slight_smile: