Question

I have a very simple slideshow setup on my homepage with fading images using jquery.

All the images are different sizes, and are currently aligning on the left of my page. I have played around with the CSS but cannot get them centred.

The CSS is:

/#content {
    height: 100%;
    width:1000px;
    margin: 50px 10px 10px 230px;
    top: 10px;
    background-color: #fff;
}

/.slideshow { height: 450px; width: 974px; align: center; margin-left:auto; marginright:auto; margin-bottom:10px; margin-top:10px; }

/.slideshow img { padding: 0px; border: none; background-color: #fff }

The HTML is:

div id='content' style="width:974"

div class='container'

div class="slideshow" style="margin-bottom:10px;"

a href="" img src="images/home/1.jpg"  align="absmiddle" /></a>
a href="" img src="images/home/2.jpg"  align="absmiddle" /></a>
a href="" img src="images/home/3.jpg"  align="absmiddle"/></a>
a href="" img src="images/home/4.jpg"  align="absmiddle"/></a>
a href="" img src="images/home/5.jpg"  align="absmiddle" /></a>
div

Basically, the slideshow div in enclosed in the content div. With the images it is showing I simply want tm to be centred as opposed to aligned to the left.

Any ideas??

(sorry if the way I presented my code is very messy!)

Thanks

Answer 1

Add

display:block;
margin:auto;

to slideshow img