多個div居中對齊左彼此坐

Question

我試圖讓多個div坐在彼此相鄰，居中。當窗口太小而無法將所有的div放入一行時，我希望溢出的div能夠碰到下一行。優選地左對齊但仍居中。

如果這是不可能的，我也很樂意讓他們只是居中對齊。

的我怎麼想這功能的一個例子是在本頁面底部的大大拇指http://www.klossal.com/portfolio/index2.html

我遇到問題的當前頁是這裏http://www.klossal.com/portfolio/test.html

這裏是我當前的代碼：

<div 
    align="center" 
    style=" 
     clear:both; 
     margin-left:auto; 
     margin-right:auto; 
     width: 100%; 
     visibility: show;"> 


    <div style="height:330px;width:330px;float:left;"> 
     <div style="left:0px;width:330px;"> 
      <a class="lib" href="#"> 
       <img   src="http://www.klossal.com/portfolio/library/space/space_lib.png" /> 
      </a> 
     </div> 
     <div style="width:300px;left:0px;"> 
      <p class="ex2" align="left">Made in Photoshop</p> 
      <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
      <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p> 
     </div> 
    </div> 

    <div style="height:330px;width:330px;float:left;"> 
     <div style="left:0px;width:330px;"> 
      <a class="lib" href="#"> 
       <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" /> 
      </a> 
     </div> 
     <div style="width:300px;left:0px;"> 
      <p class="ex2" align="left">Made in Photoshop</p> 
      <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
      <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p> 
     </div> 
    </div> 

    <div style="height:330px;width:330px;float:left;"> 
     <div style="left:0px;width:330px;"> 
      <a class="lib" href="#"> 
       <img src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" /> 
      </a> 
     </div> 
     <div style="width:300px;left:0px;"> 
      <p class="ex2" align="left">Made in Photoshop</p> 
      <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
      <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p> 
     </div> 
    </div> 

    <div style="height:330px;width:330px;float:left;"> 
     <div style="left:0px;width:330px;"> 
      <a class="lib" href="#"> 
       <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" /> 
      </a> 
     </div> 
     <div style="width:300px;left:0px;"> 
      <p class="ex2" align="left">Made in Photoshop</p> 
      <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
      <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p> 
      <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
     </div> 
    </div> 

    <img src="/media/divider.png" width="100%" height="52px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" /> 
</div> 

Answer 1

糾正我，如果我錯了，但你的意思是這樣：

<div class="container"> 
    <div class="img"> 
     <a href="#"> 
      <img src="http://www.klossal.com/portfolio/library/space/space_lib.png" /> 
      <p>Picture one..</p> 
     </a> 
    </div> 
    <div class="img"> 
     <a href="#"> 
      <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" /> 
      <p>Picture two..</p> 
     </a> 
    </div> 
    <div class="img"> 
     <a href="#"> 
      <img src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" /> 
      <p>Picture three..</p> 
     </a> 
    </div> 
    <div class="img"> 
     <a href="#"> 
      <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" /> 
      <p>Picture four..</p> 
     </a> 
    </div> 
</div> 

我覺得呢？

檢查的jsfiddle here...