多个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...