我正在尝试制作一个图像列表，如下图（图片库）中的图像，我找到了一个源代码并对其进行了修改，但我不知道如何更改它，因此图像设置在水平线上：以下是代码（已更改）有什么想法吗？
<div id="ps_slider" class="ps_slider"><!-- element7-->
<a class="prev disabled"></a>
<a class="next disabled"></a>
<p><h1> Nos references </h1></p>
<p>Urbanisme</p>
<div id="ps_albums"><!--element 8-->
<div class="ps_album" style="opacity:0;"><div id='element8' ><div class='image'><img src="decoupage/images/fotolia_1583854.jpg" alt="" height='100' width='130'/></div><div class='text'><p>image number 1</p></div></div></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/fotolia_2859009.jpg" alt="" height='100' width='130'/></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/img1.jpg" alt="" height='100' width='130'/></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/fotolia_44955.jpg" alt="" height='100' width='130'/></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/img4.jpg" alt="" height='100' width='130'/></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/img6.jpg" alt="" height='100' width='130'/></div>
<div class="ps_album" style="opacity:0;"><img src="decoupage/images/img2.jpg" alt="" height='100' width='130'/></div>
</div>
</div>
CSS代码：
body, ul, li, h1, h2, h3{
margin:0;
padding:0;
}
/* Image container style */
.ps_container{
width:480px;
height:350px;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-240px;
z-index:100;
}
.ps_container img{
border:1px solid #fff;
position:absolute;
top:50%;
left:50%;
-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
box-shadow:1px 1px 10px #000;
}
a.ps_next_photo:hover,
/* Thumbnail slider style */
.ps_slider{
width:500px;
height:300px;
position:relative;
margin:110px auto 0px auto;
}
.ps_slider a.next,
.ps_slider a.prev{
position:absolute;
background-color:#000;
background-position:center center;
background-repeat:no-repeat;
border:1px solid #232323;
width:20px;
height:20px;
top:20%;
margin-top:-10px;
opacity:0.6;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
cursor:pointer;
outline:none;
}
.ps_slider a.prev:hover,
.ps_slider a.next:hover{
border:1px solid #333;
opacity:0.9;
}
.ps_slider a.disabled,
.ps_slider a.disabled:hover{
opacity:0.4;
border:1px solid #111;
cursor:default;
}
.ps_slider a.prev{
left:-30px;
background-image:url(images/prev.png);
}
.ps_slider a.next{
right:-30px;
background-image:url(images/next.png);
}
.ps_slider .ps_album{
width:140px;
height:100px;
padding:10px;
background-color:#333;
border:1px solid #444;
position:absolute;
top:0px;
text-align:center;
cursor:pointer;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
-webkit-box-reflect:
below 5px
-webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.6, transparent),
to(rgb(18, 18, 18))
);
}
.ps_slider .ps_album:hover{
background-color:#383838;
}
.ps_slider .ps_album img{
height:90px;
border:1px solid #444;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.ps_slider .ps_album:hover .ps_desc{
background-image:none;
}
.ps_slider .ps_album .ps_desc span{
display:block;
margin:0px 10px 10px 10px;
border-top:1px solid #333;
padding-top:5px;
}
