안녕하세요. 개발자를 꿈꾸는 학생입니다. 현재 프로젝트로 홈페이지를 만드는 것을 하고 있습니다. 게시판을 만들려고 하는 중인데, 문제가 두가지 생겼습니다.

사진만 나오는 게시판을 만들려고 합니다. 그래서 무한스크롤을 통해서 페이지 가장 밑쪽에 도달했을 때, 리스트에 저장되있는 그림을 foreach문으로 꺼내는 형식으로 했습니다.

우선 코드는 이렇게 작성했습니다.

<div id="content" style="text-align: center;">
<c:forEach var="board" items="${boardList}" varStatus="stat" begin="0" end="8">
    <span>
        <a href="detailBoardboardno=${board.boardno}&searchItem=${searchItem}&searchWord=${searchWord}">
            <img src="uploadPath/${board.SFile}" style="width: 30%; height: 300px;" alt="" /></a>
    </span>
</c:forEach>    
</div>

그리고 추가되는 부분은 (자바스크립트)

    $(document).scroll(function() {
    var maxHeight = $(document).height();
    var currentScroll = $(window).scrollTop() + $(window).height();
    var start = ${requestScope.result};
    var end = "";
    var content = "";
    if (maxHeight <= currentScroll) {
        content += "<br>";
        content += "<c:forEach var='board' items='${boardList}' varStatus='stat' begin='9' end='18'>";
        content += "<span>";
        content += "<a href='detailBoard?boardno=${board.boardno}&searchItem=${searchItem}&searchWord=${searchWord}'>";
        content += "<img class='card-img-top' src='uploadPath/${board.SFile}' style='width: 30%; height: 300px;' alt='' /></a>";    
        content += "&nbsp;";
        content += "</span>";
        content += "</c:forEach>";

        content += "<br>"

        $("#content").append(content);


    }
  })

});

이런식으로 짯는데, 살짝 어긋나게 나오네요. 무엇이 문제인지 아무리 찾아봐도 어떤점때문에 어긋나게 나오는지 잘 모르겠습니다.

두번째로는

제가 div에 스타일로 text-align:center로 해서 자식 객체인 span에 스타일을 지정해줘도 저 가운데 있는 것을 왼쪽으로 옮길 수 가 없습니다. 가운데 있는 span을 왼쪽으로 옮기는 방법은 없을까요??