[chudapati09]

I'm creating a jQuery slideshow, and I found a plugin that works great, but I can't align the slideshow to center. I'm working on a host, but I'm currently working on this site from my laptop

I've tried to put a div around the current div I have and throw styles on it, such as:

<div style="margin:auto;">

That did nothing

<div style="text-align:center;">

This actually moved the slideshow, but it didn't center it

<div align="center">

This produced the same result as text-align:center

Here is the css:

#gallery {
    position:relative;
    left:30px;
    /* height:360px */
}
    #gallery a {
        float:left;
        position:absolute;
    }

    #gallery a img {
        border:none;
    }

    #gallery a.show {
        z-index:500
    }

Here is the HTML:

<div id="gallery" >

    <a href="#" class="show">
        <img src="images/img1.jpg" />
    </a>

    <a href="#">
        <img src="images/img2.jpg"/>
    </a>

    <a href="#">
        <img src="images/img3.jpg" />
    </a>

    <a href="#">
        <img src="images/img4.jpg" />
    </a>

    <a href="#">
        <img src="images/img5.jpg" />
    </a>

    <a href="#">
        <img src="images/img6.jpg" />
    </a>

</div>

[chudapati09]

I just found a working host http://chudapati09.rocketzone.net/

[chudapati09]

Nevermind, I figured it out.

In the css:
#gallery - remove left:30px

In the html:
Put a div around the gallery div with a width of 100%
Then in the gallery div set a width of 565px

So the CSS should look like this:

#gallery {
	position:relative;
	margin:auto;
}

The HTML should look like this:

<div style="width:100%;">
<div id="gallery" style="width:565px;" >

	<a href="#" class="show">
		<img src="images/img1.jpg" />
	</a>
	
	<a href="#">
		<img src="images/img2.jpg"/>
	</a>
	
	<a href="#">
		<img src="images/img3.jpg" />
	</a>

	<a href="#">
		<img src="images/img4.jpg" />
	</a>
	
	<a href="#">
		<img src="images/img5.jpg" />
	</a>
	
	<a href="#">
		<img src="images/img6.jpg" />
	</a>
</div>
</div>

[Sadin56]

chudapati09, on 16 March 2011 - 05:53 PM, said:

I'm creating a jQuery slideshow, and I found a plugin that works great, but I can't align the slideshow to center. I'm working on a host, but I'm currently working on this site from my laptop

I've tried to put a div around the current div I have and throw styles on it, such as:

<div style="margin:auto;">

That did nothing

<div style="text-align:center;">

This actually moved the slideshow, but it didn't center it

<div align="center">

This produced the same result as text-align:center

Here is the css:

#gallery {
    position:relative;
    left:30px;
    /* height:360px */
}
    #gallery a {
        float:left;
        position:absolute;
    }

    #gallery a img {
        border:none;
    }

    #gallery a.show {
        z-index:500
    }

Here is the HTML:

<div id="gallery" >

    <a href="#" class="show">
        <img src="images/img1.jpg" />
    </a>

    <a href="#">
        <img src="images/img2.jpg"/>
    </a>

    <a href="#">
        <img src="images/img3.jpg" />
    </a>

    <a href="#">
        <img src="images/img4.jpg" />
    </a>

    <a href="#">
        <img src="images/img5.jpg" />
    </a>

    <a href="#">
        <img src="images/img6.jpg" />
    </a>

</div>

for auto margin to work you need to set a width even though you found your solution im just going to show ya how.

#div{
  margin:auto;
  width:100px;
}