圖片庫水平對齊

我想製作圖片列表（圖片庫），我找到了一個源代碼和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

圖片庫水平對齊

回答

相關問題