절대적으로 배치 된 이미지 가운데에 위치하기

Question

그래서 전환 효과없이 this pure CSS sliding gallery을 사용하고 있으며, 지금까지는 상당히 효과적입니다.

그러나 내 이미지가 모두 같은 크기는 아닙니다. 모든 전경 이미지가 왼쪽에 정렬 된 것처럼 보이고 가운데에 배치하면 훨씬 더 멋지게 보일 것입니다.

여백을 auto로 설정하고 다른 모든 가운데 상자에 넣으면서 놀아 보았지만 작동하지 않는 것 같습니다. 전경 이미지의 위치가 절대적으로 설정된다는 사실과 관련이 있다고 생각합니다.

누구에게 의견이 있습니까? 편집 : 여기에 내가 지금 사용하고 무엇을하고 여기가 Jfiddle

HTML에 있습니다

<div class="imagescontainer">  
<div id="images"><br /> 
<a href="images/large_lioxposter1.png" target="_blank"><img src="http://img19.imageshack.us/img19/6471/6eor.png" alt="Liox Poster 1" name="image1" id="image1" /></a> 
<img id="image2" src="http://img89.imageshack.us/img89/8955/ha1e.png" /> 
<img id="image3" src="http://img812.imageshack.us/img812/6363/1k48.png" /> 
<img id="image4" src="http://img577.imageshack.us/img577/5867/a26z.png" /></div></div> 
<center> 
<div id="slider"> 
<a href="#image1"><img src="images/mini_lioxposter1.png" alt="LIOX Poster"/></a> 
<a href="#image2"><img src="images/mini_lioxposter2.png" alt="LIOX dimensions" /></a> 
<a href="#image3"><img src="images/mini_lioxposter3.png" alt="Technical drawings" /></a> 
<a href="#image4"><img src="images/mini_lioxposter4.png" alt="Technical drawings" /></a></div></center> 

</div> 

CSS :

.imagescontainer 
{ 
margin-left:auto; 
margin-right:auto; 
border-style:dotted; 
text-align:center; 
} 
#images { 
height: 270px; 
overflow: hidden; 
position: relative; 
margin: 5px auto; 
} 

#images img { 

height: 250px; 
padding-top:10px; 
position: absolute; 
top: 0; 
left: -600px; 
z-index: 1; 
opacity: 0; 
} 

#images img:target { 
left: 0; 
z-index: 9; 
opacity: 1; 
} 

#images img:first-child { 

opacity: 1; 
} 

#images:hover 

{ 
opacity:0.5; 
} 

감사합니다!

Answer 1

간단한 사용 수평 수직으로뿐만 아니라 그것을 중심 것이 간단한 트릭 : http://jsfiddle.net/CPsmg/1/이

은 또한 참조를 참조하십시오

#images img { 
    top:50%; 
    left: 50%; 
    width: 440px; 
    margin-top: -125px; /* Half the height */ 
    margin-left: -220px; /* Half the width */ 
    height: 250px; 
    position: absolute; 
    z-index: 1; 
    opacity: 0; 
} 

를 살펴 보자 : http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

이 시도 :

img { 
position: absolute; 
left: 0; 
right: 0; 
margin: 0 auto; 
}