페이지 너비에 따라 고르게 분포되도록 서로 이미지를 정렬하는 방법은 무엇입니까?

Question

나는 다음을 수행해야합니다 서로 외에 (128 * 128)의 동일한 크기의

1. 정렬 네 개의 아이콘.
2. 페이지 너비에 따라 고르게 분포되도록 아이콘이 필요합니다.
3. 그 아이콘이 페이지의 중앙에 있어야합니다.
4. 해당 아이콘에는 캡션이 있어야하며 페이지에 균등하게 중앙 집중화되어 있어야합니다.

나는 이런 식으로 작업을 시작 :

<table> 
<tr> 
<td>INSERT_IMAGE1_URL_HERE</td> 
<td>INSERT_IMAGE2_URL_HERE </td> 
<td>INSERT_IMAGE3_URL_HERE </td> 
<td>INSERT_IMAGE4_URL_HERE </td> 
</tr> 
<tr> 
<td>INSERT_IMAGE1_CAPTION_HERE </td> 
<td>INSERT_IMAGE2_CAPTION_HERE </td> 
<td>INSERT_IMAGE3_CAPTION_HERE </td> 
<td>INSERT_IMAGE4_CAPTION_HERE </td> 
</tr> 
<tr> 
</table> 

을하지만 너무 멀리 위의 결과를 얻는에서였다. 가운데 태그가 도움이되지 않아 캡션이 엉망이되었습니다.

제안 사항? 이 같은

Answer 1

뭔가 :

HTML

<div class="container"> 

    <figure> 
     <img src="http://placehold.it/128x128"> 
     <figcaption>Caption 1</figcaption> 
    </figure> 

    <figure> 
     <img src="http://placehold.it/128x128"> 
     <figcaption>Caption 2</figcaption> 
    </figure> 

    <figure> 
     <img src="http://placehold.it/128x128"> 
     <figcaption>Caption 3</figcaption> 
    </figure> 

    <figure> 
     <img src="http://placehold.it/128x128"> 
     <figcaption>Caption 4</figcaption> 
    </figure> 

</div><!-- /.container --> 

CSS

body {margin:0;} 
.container {} 
figure { margin:0; width:25%; float:left; text-align: center; } 

JSFiddle Demo