3 Replies - 4218 Views - Last Post: 17 March 2011 - 07:11 AM

#1 chudapati09  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 16-March 11

Can't get a div to align center

Posted 16 March 2011 - 05:53 PM

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

Posted Image
<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>



Is This A Good Question/Topic? 0
  • +

Replies To: Can't get a div to align center

#2 chudapati09  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 16-March 11

Re: Can't get a div to align center

Posted 16 March 2011 - 06:12 PM

I just found a working host http://chudapati09.rocketzone.net/
Was This Post Helpful? 0
  • +
  • -

#3 chudapati09  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 16-March 11

Re: Can't get a div to align center

Posted 16 March 2011 - 07:08 PM

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>

Was This Post Helpful? 0
  • +
  • -

#4 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Can't get a div to align center

Posted 17 March 2011 - 07:11 AM

View Postchudapati09, 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

Posted Image
<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;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1