简单的Javascript图库 - 缩略图不会与中心对齐 [英] Simple Javascript Gallery - Thumbnails won't align to center
问题描述
我遵循我的大学课程中的一个教程来创建一个简单的Javascript库。除了缩略图之外,页面上的所有内容都与中心对齐。我已经尝试了很多代码来排序它,但没有任何工作。即使是1个缩略图也不会对齐。
I have followed a tutorial from my University course to make a simple Javascript gallery. Everything on the page aligns to the center apart from the thumbnails. I have tried numerous code to sort it but nothing works. Even 1 thumbnail doesnt align.
http:// www.imagebam.com/image/e00d83368784836
这里是html:
<div id="gallery">
<div id="homegallimage">
<img id="1" src="../images/homegallery/1.jpg" alt="Web Site Example 1" />
</div>
<ul id="thumbnails">
<li><img src="../images/homegallery/1.jpg" alt="Web Site Example 1" class="thumbnail"></li>
<li><img src="../images/homegallery/2.jpg" alt="Web Site Example 2" class="thumbnail"></li>
<li><img src="../images/homegallery/3.jpg" alt="Web Site Example 3" class="thumbnail"></li>
<li><img src="../images/homegallery/4.jpg" alt="Web Site Example 4" class="thumbnail"></li>
<li><img src="../images/homegallery/5.jpg" alt="Web Site Example 5" class="thumbnail"></li>
<li><img src="../images/homegallery/6.jpg" alt="Web Site Example 6" class="thumbnail"></li>
<li><img src="../images/homegallery/7.jpg" alt="Web Site Example 7" class="thumbnail"></li>
<li><img src="../images/homegallery/8.jpg" alt="Web Site Example 8" class="thumbnail"></li>
<li><img src="../images/homegallery/9.jpg" alt="Web Site Example 9" class="thumbnail"></li>
</ul>
</div>
以下是CSS:
Here is the CSS:
.content
{
color: #000;
background-color:#fff;
text-align: center;
}
.thumbnail
{
width: 100px;
height: 50px;
border: solid 4px #6ed8f2;
}
#thumbnails li
{
display: inline-block;
list-style-type: none;
}
#homegallimage img
{
border: solid 8px #6ed8f2;
}
这就是JavaScript:
And this is the JavaScript:
// changes source on image to that provided within the thumbnail image tag
function showPic(i_element) {
var source = i_element.getAttribute("src") ;
var alt = i_element.getAttribute("alt") ;
var i = document.createElement("img") ;
i.setAttribute("src",source) ;
i.setAttribute("alt",alt) ;
var placeholder = document.getElementById("homegallimage") ;
//alert(placeholder.childNodes.length) ;
placeholder.removeChild(placeholder.childNodes[0]);
placeholder.appendChild(i) ;
}
// add the onclick event to the DOM
function addImages() {
var item = document.getElementById("thumbnails").getElementsByTagName("img") ;
for (var i=0 ; i<item.length ; i++) {
item[i].onmouseover = function() {showPic(this) ; } ;
}
}
// specifies the method to run onload
window.onload = addImages ;
推荐答案
你需要给ul一个920px的宽度,然后给它保证金:汽车;这应该在中心对齐它。要集中对齐某些东西,您需要指定其容器的宽度。
You need to give the ul a width of 920px then give it "margin:auto;" this should align it in the centre. To centrally align something you will need to specify the width of its container.
这篇关于简单的Javascript图库 - 缩略图不会与中心对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!