asked on

Css/Jquery Center image in browser

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

Html:
<div class="header_blog">


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


</div>

Style:
.header_blog { padding:0; background:#ab334b; margin:0 auto; }

mreuring

#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...

Gurvinder Pal Singh

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>

ASKER

Horizontal alignment.

Gurvinder Pal Singh

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

acashok

please try with this:

<div class="header_blog" align="center">


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


</div>

ASKER

none of the solutions work

Gurvinder Pal Singh

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

ASKER

The images are centered, but are not centered in the middle of the browser page.

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

work