中心對齊圖像列表

Question

一些CSS大師能幫助我獲得這種佈局。

我這裏是

<div class="movieList"> 
<div class="image" selected = true> 
<img class="poster" src="image1" selected = true/> 
</div> 
<div class="image"> 
<img class="poster" src="image1"/> 
</div> 
<div class="image"> 
    <img class="poster" src="image2"/> 
</div> 
. 
. 

</div> 

感謝

Answer 1

開始：

.cover { 
    float:left; 
    margin-left:-50px; 
} 

，並從那裏走。

例子：http://jsfiddle.net/steve/T2qHR/（居中，純CSS，放大效果）

Answer 2

如果你想顯示他們比史蒂夫有正確的答案，如果你要對齊的中心則該容器：

.cover { 
    margin: 0 auto; 
    width:600px; 
} 

Answer 3

看到這個http://www.jsfiddle.net/hKQcX/4/

$(function(){ 

    $('.movie').live('mouseover', function(){ 

    var $movie = $('.movie'); 
    $movie.css('z-index', 0); 
    $movie.css('opacity', .50); 
    $movie.css('width', '100px'); 
    $movie.css('height', '150px'); 
    $movie.css('margin-top', '0'); 

    var $this = $(this); 
    $this.css('z-index', 100); 
    $this.css('opacity', 1.00); 
    $this.css('width', '120px'); 
    $this.css('height', '180px'); 
    $this.css('margin-top', '-15px'); 

    }); 

    var i=0; 
    for (i;i<10;i++){ 
    if(i%2==0) 
     $('#container').append('<div class=\"movie red \"></div>'); 
    else 
     $('#container').append('<div class=\"movie green\"></div>') 
    } 
}); 

在你的CSS

#container{ 
    margin-left: 50px; 
    margin-top: 100px; 
} 

.movie{ 
    position: relative; 
    float:left; 
    width:100px; 
    height: 150px; 
    margin-left:-50px; 
} 

.red{ 
    background-color:red; 
    opacity: .5; 
} 

.green{ 
    background-color:green; 
    opacity: .5; 
}