• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 714
  • Last Modified:

Css/Jquery Center image in browser

I have a jquery slide show, but i need center images in browser:

Html:
<div class="header_blog">
      <!-- * * * Banner -->
         
                <div id="slideshow">
                    <img src="images/banner/banner1.png" align="middle" alt="Slideshow Image 1" class="active"/>
                    <img src="images/Banner/banner3.png" align="middle" alt="Slideshow Image 2" />
                    <img src="images/banner/banner3.png" align="middle" alt="Slideshow Image 3" />
                </div>
      <div class="clr"></div>
      <!-- end #slideshow -->

  </div>

Style:
.header_blog { padding:0; background:#ab334b; margin:0 auto; }
0
rflorencio
Asked:
rflorencio
1 Solution
 
mreuringCommented:
#slideshow {
text-align: center;
}

provided the positioning of the images is not altered they are treated as inline-block, which is similar to plain text. As such, text-align should affect them :)

A pointer concerning 'margin: 0 auto', this only works on elements that have a defined width, otherwise the browser cannot calculate how much 'space' exists outside the element...
0
 
Gurvinder Pal SinghCommented:
you meant vertically alignment or horizontal?

this will give you vertical alignment
.header_blog { padding:0; background:#ab334b; margin:0 auto; height:300px;}
img.active { margin-top:100px; margin-bottom:100px; }

<div class="header_blog">
                <div id="slideshow">
                    <img src="images/banner/banner1.png" height="100px" alt="Slideshow Image 1" class="active"/>
                    <img src="images/Banner/banner3.png" height="100px" alt="Slideshow Image 2" />
                    <img src="images/banner/banner3.png" height="100px" alt="Slideshow Image 3" />
                </div>
      <div class="clr"></div>
  </div>

0
 
rflorencioAuthor Commented:
Horizontal alignment.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gurvinder Pal SinghCommented:
check this one
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<style>
			#slideshow { background:#ab334b; min-width:300px; padding: 10px 60px; display:inline; min-height:80px;}
		</style>
	</HEAD>

	<BODY BGCOLOR="#FFFFFF">
			<div id="slideshow">
                    <img src="21072010.jpg" width="60px" height="60px" alt="Slideshow Image 1"/>
                    <img src="18072010.jpg" width="60px" height="60px" alt="Slideshow Image 2"/>
                    <img src="21022009.jpg" width="60px" height="60px" alt="Slideshow Image 3"/>
            </div>
	</BODY>
</HTML>

Open in new window

0
 
acashokCommented:
please try with this:

<div class="header_blog" align="center">
      <!-- * * * Banner -->
         
                <div id="slideshow" align="center">
                    <img src="images/banner/banner1.png" align="middle" alt="Slideshow Image 1" class="active"/>
                    <img src="images/Banner/banner3.png" align="middle" alt="Slideshow Image 2" />
                    <img src="images/banner/banner3.png" align="middle" alt="Slideshow Image 3" />
                </div>
      <div class="clr"></div>
      <!-- end #slideshow -->

  </div>
0
 
rflorencioAuthor Commented:
none of the solutions work
0
 
Gurvinder Pal SinghCommented:
It worked for me in IE8, FF2, Chrome6, and safari4
See this pic (from IE8)
let me know which browser you are using

abc.png
0
 
rflorencioAuthor Commented:
The images are centered, but are not centered in the middle of the browser page.
0
 
Gurvinder Pal SinghCommented:
check this then

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<style>
			html, body, div#wrapper
			{
				width:100%;
			}
			#slideshow 
			{ 
				position:absolute;
				background:#ab334b; 
				width:60%; 
				display:inline-block; 
				min-height:80px !important; 
				margin-left:20%;
				margin-right:20%;
			}
		</style>
	</HEAD>

	<BODY BGCOLOR="#FFFFFF">
		<div id="wrapper">
			<div id="slideshow">
                    <img src="21072010.jpg" width="33%" height="60px" alt="Slideshow Image 1"/>
                    <img src="18072010.jpg" width="32%" height="60px" alt="Slideshow Image 2"/>
                    <img src="21022009.jpg" width="33%" height="60px" alt="Slideshow Image 3"/>
            </div>
		</div>
	</BODY>
</HTML>

Open in new window

0
 
rflorencioAuthor Commented:
work
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now