Выравнивание по центру

laik216 · August 6, 2010

Подскажите как выровнять по центру, совсем запутался... :lol:

html

</head><body>
<div class="parent">
<span>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>

</ul>
</span>
</div> 


<div class="buttonm">

</div></div>
<div id="dhtmlgoodies_slideshow">

	<div id="galleryContainer">
		<div id="arrow_up"><img src="images/arrow-up.gif" id="arrow_up_image"></div>

		<div id="theImages">
			<div style="top: -135px;">
						<a href="#" onclick="showPreview('images/1.jpg','1');return false"><img style="opacity: 0.5;" src="images/01.jpg"></a>		
				<a href="#" onclick="showPreview('images/2.jpg','2');return false"><img style="opacity: 0.5;" src="images/02.jpg"></a>		
				<a href="#" onclick="showPreview('images/3.jpg','3');return false"><img style="opacity: 0.5;" src="images/03.jpg"></a>		
				<a href="#" onclick="showPreview('images/4.jpg','4');return false"><img style="opacity: 0.5;" src="images/04.jpg"></a>		
				<a href="#" onclick="showPreview('images/5.jpg','5');return false"><img style="opacity: 0.5;" src="images/05.jpg"></a>	

				<a href="#" onclick="showPreview('images/6.jpg','6');return false"><img src="images/06.jpg"></a>		
				<a href="#" onclick="showPreview('images/7.jpg','7');return false"><img src="images/07.jpg"></a><a href="#" onclick="showPreview('images/8.jpg','8');return false"><a href="#" onClick="showPreview('images/8.jpg','8');return false"><img src="images/08.jpg"></a></a><a href="#" onclick="showPreview('images/9.jpg','1');return false"><img src="images/09.jpg"></a>		
				<a href="#" onclick="showPreview('images/10.jpg','2');return false"><img src="images/010.jpg"></a>		
				<a href="#" onclick="showPreview('images/11.jpg','3');return false"><img src="images/011.jpg"></a>		
				<a href="#" onclick="showPreview('images/12.jpg','4');return false"><img src="images/012.jpg"></a>		
				<a href="#" onclick="showPreview('images/13.jpg','5');return false"><img src="images/013.jpg"></a>	
			  <div class="imageCaption">This is the caption of image number 1</div>
						<div class="imageCaption">This is the caption of image number 2</div>
						<div class="imageCaption">This is the caption of image number 3</div>
						<div class="imageCaption">This is the caption of image number 4</div>
						<div class="imageCaption">This is the caption of image number 5</div>
						<div class="imageCaption">This is the caption of image number 6</div>
						<div class="imageCaption">This is the caption of image number 7</div>
						<div class="imageCaption">This is the caption of image number 8</div>

			<div id="slideEnd"></div>
		  </div>

		</div>
		<div id="arrow_down"><img src="images/arrow-down.gif" id="arrow_down_image"></div>
	</div>



	<div id="previewPane"><img src="images/1.jpg"><span style="display: none;" id="waitMessage">Loading image. Please wait</span>
	  <div style="display: block;" id="largeImageCaption">This is the caption of image number 1</div>
	</div>





</div>
</body></html>

css

body{
		background-color:#000;
		background-repeat:no-repeat;
		padding-top:20px;
		text-align: center; 

	}



	#dhtmlgoodies_slideshow{
		width:800px;	/* Total width of slideshow */


	}

	#previewPane{
		border:0px solid #000;
		margin-right:10px;	
		text-align:center;
		vertical-align:middle;

		padding-left:2%;


		/* CSS HACK */
		height: 400px;	/* IE 5.x */
		height/* */:/**/400px;	/* Other browsers */
		height: /**/400px;



		width:500px;			
		float:left;

	}
	#waitMessage{
		display:none;
		position:absolute;
		left:200px;
		top:150px;
		background-color:#FFF;
		border:3px double #000;
		padding:4px;
		color:#555;
		font-size:0.9em;
		font-family:arial;	
		text-align: center;
	}	
	#galleryContainer{	/* Big Div surrounding up image, list of images and down image */
		float:left;

		/* CSS HACK */
		height: 500px;	/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
		height/* */:/**/500px;	/* Other browsers */
		height: /**/500px;

		/* CSS HACK */
		width: 124px;	/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
		width/* */:/**/120px;	/* Other browsers */
		width: /**/120px;

		border:0px solid #000;	/* Black border */		
		padding:1px;	/* A little space between the black border and the content inside */

	}
	#galleryContainer #arrow_down{	/* Arrow down image */
		height:16px;

	}
	#galleryContainer #arrow_up{
		height:16px;	/* Arrow up image */

	}

	#theImages{	/* DIV where the images are located */
		position:relative;
		overflow:hidden;
		height:498px;	/* Height of boxes for the images */

	}
	#theImages div{	
		position:relative;	/* Don't change this */
		height:1500px;	/* Higher than total height of thumbnails */


	}
	#theImages img{
		border:0px;	/* No border */
		filter:alpha(opacity=50);	/* Transparency - IE */
		opacity:0.5; /* Transparency - Firefox */
		padding-top:1px;	/* Space between images */

	}
	#previewPane #largeImageCaption{	/* CSS styling of image caption below large image */
		font-style:italic;
		text-align:center;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		font-size:0.9em;

	}
	#theImages .imageCaption{
		display:none;
	}

	div#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
} 


.parent {
padding: 20px 0;
background: #000;
}
.parent ul {
text-align: center;
}
.parent li {
display: inline;
margin-left: 20px;
}
.parent a {
color: #fff;
}
.parent li:first-child, li.first-child {
margin: 0; 
}
* html .parent li {
z-index: expression( 
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 
)
}

psywalker · August 6, 2010

Покажи картинку того, что хочешь выровнить.

laik216 · August 6, 2010

Покажи картинку того, что хочешь выровнить.

И код и картинки

psywalker · August 6, 2010

Картинке задай {display: block; margin: 0 auto; и ширину.}

Sign In

Выравнивание по центру

Question

laik216

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

laik216

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information