css - 絶対配置された画像のセンタリング

Question

だから私はトランジション効果なしでこの純粋な CSS スライド ギャラリーを使用しています。

ただし、すべての画像が同じサイズであるとは限りません。これは問題にはなりませんが、すべてのフルビュー画像が左に配置されているように見え、中央に配置すると見栄えが良くなります。

マージンを自動に設定し、すべてを別の中央のコンテナーに入れて遊んでみましたが、機能していないようです。全景画像の位置が絶対位置に設定されていることと関係があると思います。

誰か提案はありますか？編集：これが私が今使っているもので、ここは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

これを試して：

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