图片库水平对齐

我想制作图片列表（图片库），我找到了一个源代码和chage它，但我不知道如何改变它，因此图像设置为水平线：这是代码（改变），如果任何人有任何想法，将是巨大的谢谢你提前图片库水平对齐

<body> 


    <div id="ps_slider" class="ps_slider"> 
     <a class="prev disabled"></a> 
     <a class="next disabled"></a> 
     <div id="ps_albums"> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album2/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album3/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album4/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album5/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album6/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album7/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album8/thumb/thumb.jpg" alt=""/></div> 
      <div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/></div> 
     </div> 
    </div> 

    <div id="ps_overlay" class="ps_overlay" style="display:none;"></div> 
    <a id="ps_close" class="ps_close" style="display:none;"></a> 
    <div id="ps_container" class="ps_container" style="display:none;"> 
     <a id="ps_next_photo" class="ps_next_photo" style="display:none;">    </a> 
    </div> 
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:845px; 
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; 
}

来源

2012-07-13 manu

请问您可以在jsfiddle.net上发布一个例子吗？ – sed 2012-07-13 08:02:33

好吧，这是例子，http://tympanus.net/Tutorials/PhotoStack/我改变了它，所以没有下面的照片和照片的大小的文字，但不知道如何改变它，使它会在水平线 – manu 2012-07-13 08:09:25

尝试增加给你的CSS：

.ps_slider .ps_album { 
    float: left; 
}

来源

2012-07-13 08:10:22

谢谢你的答案，我试过这一个，但没有工作 – manu 2012-07-13 08:19:34

没问题，抱歉没有解决问题。除了这个尝试删除'位置：绝对;'属性并保留'float：left'因为它可能会阻止它漂浮。 – 2012-07-13 09:06:29

你可以把它们放在一个表里面

<table> 
    <tr> 
     <td>image1 stuff</td> 
     <td>image2 stuff</td> // and so on 
    </tr> 
</table>

来源

2012-07-13 08:04:12 Buzz

我认为该表可能是有用的，但我想保留下一个和上一个按钮（这样，当我点击下一个图像出现） – manu 2012-07-13 08:12:29

图片库水平对齐

回答

相关问题