• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 723
  • 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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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