Html 图像库水平对齐
我正在尝试制作一个图像库列表，我找到了一个源代码并对其进行了更改，但我不知道如何更改，以便将图像设置为水平线：如果有人有任何想法，这是更改后的代码，这将是非常好的，提前谢谢Html 图像库水平对齐,html,css,Html,Css,我正在尝试制作一个图像库列表，我找到了一个源代码并对其进行了更改，但我不知道如何更改，以便将图像设置为水平线：如果有人有任何想法，这是更改后的代码，这将是非常好的，提前谢谢 <body> <div id="ps_slider" class="ps_slider"> <a class="prev disabled"></a> <a class="next disabled"></a>
<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;
}
你可以把它们放在桌子里
<table>
<tr>
<td>image1 stuff</td>
<td>image2 stuff</td> // and so on
</tr>
</table>
尝试将此添加到CSS中：
.ps_slider .ps_album {
float: left;
}
你能在jsfiddle.net上发布一个例子吗？好的，这是一个例子，我改变了它，使照片下面没有文本，照片的大小，但不知道如何改变它，使它成为一条水平线，我认为这个表格可能有用，但是我想保留“下一个”和“上一个”按钮，这样当我单击下一个图像时就不会出现问题，很抱歉，它没有解决问题。除此之外，请尝试删除“位置：绝对；”属性并保留“float:left；”因为它可能会阻止它漂浮。