Question

我已经按照大学课程的教程制作了一个简单的Javascript库。除了缩略图之外，页面上的所有内容都与中心对齐。我尝试了很多代码来对它进行排序，但没有任何效果。即使是1个缩略图也不对齐。

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：

    .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：

    // 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 ;

Answer 1

你需要给ul宽度为920px然后给它＆＃34; margin：auto;＆＃34;这应该在中心对齐。要集中对齐某些内容，您需要指定其容器的宽度。

简单的Javascript库 - 缩略图赢得了与中心对齐

1 个答案: