반응 형 웹 디자인에서 마지막 행의 썸네일을 모두 가운데에 배치하려면 어떻게해야합니까?

Question

내가 stackoverflow에 게시하기 시작했을 때 간단한 HTML 레이아웃에 대한 질문을하지는 않을 것이라고 생각했지만, 겸손한 파이 조각이 여기에 있습니다. 이 바이올린에서

:

http://jsfiddle.net/cheolsoo/zd5fupje/

.main {text-align:center} 

축소판에 상관없이 내가 원하는 페이지 너비의 페이지에 집중되어 있지만, 썸네일의 마지막 (불완전) 행은 중앙에 나는 싫어. 마지막 행을 다른 행과 함께 왼쪽으로 플러시하고 오른쪽에 공백을 넣길 원합니다. 이 바이올린에서

:

http://jsfiddle.net/cheolsoo/330z8bw1/

마지막 행은 내가 원하는 오른쪽하지만, 썸네일의 전체 배치에 빈 공간이 다른 행과 같은 높이 왼쪽이다는 왼쪽 조금이다 센터 너비에 따라 센터, 내가 원하지 않는.

그럼 전체 축소판 그림을 완벽하게 가운데에 배치 할 수는 있지만 아래쪽 행은 나머지와 함께 남았습니다. 나는 (1) 다양한 화면 너비에 대해 미디어 쿼리를 사용하고 (2) 행 끝 부분에 n 개의 더미 미리보기를 넣기 위해 JavaScript를 사용하는 추악하고 복잡한 솔루션 (n = (총 축소판 수) % (한 줄에 축소판 수)가 발생했지만 이러한 해결 방법은 추악하고 복잡합니다.

썸네일 수는 다양하지만 알고 있습니다. 미리보기 이미지의 너비도 알고 있습니다. (그들은 모두 같은 크기입니다.)

Answer 1

인 flexbox은 JS없이, 당신의 문제에 대한 괜찮습니다 ... 나는 그것을 사용할 수있는 CSS의 일부 비트가 나에게 발생하지 않았이 있어야 만 CSS3 http://codepen.io/anon/pen/kFmdJ

HTML :

<ul class="flex-container"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

CSS :

는 codepen에 결과를 참조

ul.flex-container { 
    width: 60%; 
    padding: 0; 
    margin: 0 auto; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 

}

ul.flex-container li { 
    background: tomato; 
    padding: 5px; 
    margin: 5px; 
    width: 200px; 
    height: 150px; 
    margin-top: 10px; 

    line-height: 150px; 
    color: white; 
    font-weight: bold; 
    font-size: 3em; 
    text-align: center; 
} 

당신이있어 완전한 튜토리얼 볼 수 있습니다 http://css-tricks.com/snippets/css/a-guide-to-flexbox/