Question

所以我在没有过渡效果的情况下使用this pure CSS sliding gallery，到目前为止它的效果非常好。

然而，并非所有我的图像都是相同的大小！这不会是一个问题，除了所有全景图像似乎都与左边对齐，如果它们居中，它看起来会更好。

我已经尝试将边距设置为自动，然后将其全部放在另一个居中的容器中，但它似乎不起作用。我认为这与全景图像的位置设置为绝对的事实有关。

有没有人有任何建议？编辑：这是我现在正在使用的，这里是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

简单地使用这个简单的技巧，它将垂直和水平居中：

#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://jsfiddle.net/CPsmg/1/

另见参考：http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

试试这个：

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

居中定位的图像居中

2 个答案: