0

所以我正在使用这个没有过渡效果的纯 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;
}

谢谢！

4

2 回答 2

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-horizo​​ntal-an-image/

于 2013-11-02T02:22:01.930 回答
0

试试这个：

img {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
于 2013-11-02T01:38:17.397 回答